This is the effect I need for my website:
http://urban-walks.com/#nicer_way
Not the fancy side of it - I have background images for certain 'sections' or divs, and I need them to fill the whole of the browser window. They also need to resize when changing browser side (such as using mobile) so it keeps the effect.
This is my current code for each div -
HTML:
<div class="graph">
<br><h1>Latest SKE Graph</h1>
<img src="knowledge_graph.jpg">
</div>
CSS:
.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 700px;
text-align: center;
}
Change your height to "100vh" and your width to "100vw". v stands for view-port of the device.
.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
text-align: center;
}
Related
I am trying to fit my background image to my different media queries but i cannot make the image to display completely.
.main {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
background: url("images/BANNER.png");
background-size: cover;
position: center;
background-attachment: fixed;
}
#media (max-width:375px) {
.main {
background-image: url("images/BANNER.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
}
<section class="main" id="main">
<div class="content">
<h2>Hello, this is <br><span>Aptos Koalas</span></h2>
LFM!
</div>
</section>
I was able to center de image with background-position but i cannot make the image to show completely.
you are using the background-size: cover; property that will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
try with background-size: contain
I have HTML and CSS like this:
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-size: 100% auto;
border-radius: 50px 50px;
}
<div class='item'></div>
When I resize the browser, the bottom border-radius doesn't work.
Change background-size: cover; and you could add background-position: center; to center your image.
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius:50px 50px;
}
<div class='item'></div>
As mentioned in other answers, you might want to use background-size: cover;. It will stretch the image to cover the whole area of the div (so the border-radius will be visible).
However since the image can be cropped after this change (specifically in the case when it does not have the same aspect-ratio like the area of the div), it might be necessary to use also background-position to position the background image as you like (by default it is aligned to the top left corner).
Most probably you will have good results with centering it, but the possibilities are endless ;)
background-size: cover;
background-position: center;
help, header banner is incomplete on phone screen
.imgbanner{
height: 200px;
max-width: 100%;
margin-top: -70px;
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
}
<div class="imgbanner">
</div>
How can I make it display well horizontally?
Real image: https://i.imgur.com/fKnCN5Z.png 1024x312px
Try removing the width and margin. You also might not want to set a fixed height, because this will crop your image on smaller screens.
Like this, the text in the image might not be readable when viewed on smaller screens.
.imgbanner {
height: 200px;
/* max-width: 100%; */
/* margin-top: -70px; */
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
}
<div class="imgbanner">
</div>
You should remove max-width and custom height property because this will crop your background image or try to add property background-repeat:no-repeat;
.imgbanner {
height: 200px;
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
background-repeat: no-repeat;}
<div class="imgbanner"></div>
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
I have a background image that I would like to fill the width of the (responsive) page. I.e. if the page is huge, the width of the image is also huge. However if the width shrinks down the image is cropped rather than scaled (because I want the height to stay the same, i.e. no white space anywhere).
I have most of it working, except filling the width.
Here is my jsfiddle: https://jsfiddle.net/jwdyc1rh/
HTML:
<body class=" cms-index-index cms-home">
<div class="main-container col1-layout">
<div class="main">
</div> <div>
</div>
CSS:
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
}
Kind of hard to see without stretching the screen huge, but you can see the white background if it's stretched, rather than the image scaling to fit.
A perfect example of this working how I want is www.prada.com but I can't seem to work out the right code.
Use background-size: cover;
jsfiddle
Apply background size like background-size: 100% 100%;
It will do the trick.
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
background-size: 100% 100%;
}
Updated Fiddle
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;