I want to do like that: https://youtu.be/shgvBWJ-lTw?t=175
But when I do like that, it would not be responsive. How can i do that responsive in html, css, bootstrap?
I tried many things.
Umm, there is not images from your code or website so i cant see what is actually happening and why your image is not responsive. Make section with .container-fluid So section will have 100% width and responsive, then edit your box with image in css like this:
exapmle:
.box is element where you want to apply your fixed background image.
.box{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
}
I'm not sure if this is going to help you but try it, if this doesn't help try to find another solution or next time send image with your code or website. :D
Related
EDIT: solved! Check the comments, cheers Dev!
On my website's homepage I want to insert a background image that fits the full screen width. I'm using WordPress and Elementor to do this.
I've tried many setups but I'm unable to fill the full screen width, while keeping the correct image height so the ratios stay correct.
A part of the right side of the image was cut off.
Code I used:
<div id="kunstplein1920"></div>
#kunstplein1920 {
background: url(imageURLhere);
background-repeat: no-repeat center fixed;
background-size: cover;
min-width: 1920px;
min-height: 603px;}
Any help is appreciated! Thanks. :)
Cheers,
Joris
Did you try adding
width: 100%?
should be working
I need help and I did not found any proper answer so far. I want to make background image on my website that is full width and height and responsive to any resolution and it is ok but problem is when I put other images ( I have 7 images over background img ). I place them and set with media query for every resolution and it is ok only when is fullscreen but when I watch regularly with address bar and bookmark bar in my browser it all messes around and even my background picture is not full width and height anymore. Sorry for bad English.
CSS for body:
body {
background-image: url('images/background1.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-size: 100% 100%;
height: 100vh;
margin: 0px;
}
Then I put my images and with margin - left, right, bottom, top place them for different screen resolution in media query.
Do I need to set proper position to images or something else? Please give me a hint.
Edit:
This is what I get in fullscreen and it is ok
But this is when is not fullscreen
All are images except strips, those are part of background image.
Images have only margin style, nothing else. They are in divs with float style.
The easiest way to make background images responsive is this:
img{
background-image: url('.../your-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I am having trouble keeping a consistent Background image height on a div across multiple devices, I am using Chrome's DevTools to preview the outcome on different devices based on their width. Let me explain further.
I have a div with the following class...
.header-image {
width: 100%;
height: 57%;
background: url('img/fruit-water.jpg') lightgrey;
background-size: 100%;
display: block;
}
This displays perfectly fine on the normal computer viewport, the height: 57%; property displays the perfect amount of the background image that I need. But when I change the view onto another device it doesn't display the same amount of the image that it initially did, it only shows about 20% of the image.
Does anyone know a way to keep the amount of the image displayed consistent, even with the width value changing?
I can't use Jquery or any plugins as the page is an AMP page and validates according to the AMP rules set by google.
https://jsfiddle.net/pre6L7d9/1 <-- Fiddle, Please look into it
Thanks in advance.
as #severinolorillajr said you can use:
background-size:cover;
and if you want to center it to the top you can use:
background-size: cover;
background-position:50% 0%;
EDIT:
Sorry i cannot answer the other question,
if you want to use a % height like 57% you need to set the image position:absolute;
Or you can use:
height:57vh;
That will do the trick!
EDIT2:
maybe you need to mantain the image scale, then you need to set it to:
height:57vw;
.header-image {
background: url('img/fruit-water.jpg') no-repeat center center fixed;
background-size: cover;
}
Check this for other CSS Implementation
This is a simple question about CSS, but I am not sure I know how to ask it correctly. Basically, I have an image that I wanted repeated both x and y. But even though this image is repeated, is it possible to style it as if the image was positioned absolutely?
Take this image here: https://samraines.herokuapp.com/assets/paper-d5baa328bec5b7c9fe4cf98bba88452e.png, and look at it here: https://samraines.herokuapp.com/shows . This is what I was wanting to use this style on, but was unsure if I could accomplish and "absolute" style due to the image's size.
Clarifying once more, I want the image to repeat, but appear as if it was fixed.
Thanks for your help.
Try this css:
.element {
background-image: url(...);
background-position: 0 0;
background-repeat: repeat;
background-size: auto;
background-attachment: fixed; // if you do not want to scroll image with site
}
like here http://codepen.io/Chovanec/pen/dkFDp
This is my tumblr blog:
thestorywithnoending.tumblr.com
the code for the blog is a theme I got here:
http://themes.pouretrebelle.com/lycoris/?download
(just scroll down a bit, the whole code is there)
I want the background image to just be ONE image...
I know I'm not being descriptive enough, so to fruther explain: I want it to be like this:
http://chloescheffe.com/
you see how on that website the background image is.... everything basically. And when you change the size of the webpage, the background image changes accordingly?
how can I do that on my tumblr blog?
THANKS :)
with css. set the height and width of your bg image to 100%. sorry, i'd give you the code but this keyboard doesn't have all the characters of a larger one.
use the background-size css property w3schools.com/cssref/css3_pr_background-size.asp
You can do this two ways using background-size. One will stretch the image and one will fill the width properly, but cut off the bottom.
For stretch, add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
For width-fill (this looks better with your current blog), add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: cover;
}