I'm trying to show a picture as the background of my website so I'm using the following code
HTML:
<div>
<img src="images/background.jpg" id="bg" alt="background_image" />
</div>
Css:
#bg {
width: 100%;
height: 75%;
position: absolute;
z-index: -5000;
}
I was wondering how can I put a limit on how big is the background going to get because I don't want it to stretch more than 2000px.
Thanks
Just include max-width in your CSS.
#bg {
width: 100%;
max-width: 2000px;
height: 75%;
position: absolute;
z-index: -5000;
}
I would use the following css:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and remove your div entirely.
To limit the size you can:
#bg {
min-height: 100%;
max-width: 2000px;
width: 100%;
height: auto;
position: fixed;
top: 0;
bottom: 0;
}
You can use max-width
#bg {
width: 100%;
height: 75%;
position: absolute;
z-index: -5000;
max-width: 2000px; /* use this to limit the maximum width */
}
I haven't tested it, but add max-width:2000px; to your #bg selector.
try this
#bg {
width: 100%;
height: 100%%;
background-size:100%;
}
Related
My background image isn't showing and I can't figure out why. I've already read through a few other threads but none of the suggestions are working.
The path to the background image is correct, that's not the problem. I've added a height and size/position etc.
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
background: url("links/slideshow/_anx_tote2.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
The background image should cover the right half of the screen.
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
width: 100%;
background-image: url("https://picsum.photos/200");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
You need to add 100% height for body and HTML.
The image doesn't show because there was no width and height set to #slideshow.
Adding percentage height to a div, a height has to be determined first.
For more information, you can see here.
Thus I have added height: 100vh; and width: 100% to #slideshow;
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
background: url("https://i.imgur.com/WLimwqR.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100vh;
width: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
#slideshow {
background: url(links/slideshow/_anx_tote2.jpg) no-repeat transparent;
background-size: cover;
height: 100%;
}
I want my background image to cove the entire div but instead there are a lot of white space
HTML
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
CSS
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
Please use background-size:cover
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
background-size:cover;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the white border bothers you around the background, use something like this:
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction {
height: 900px;
width: 100%;
}
body {
margin: 0;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the image is smaller than the screen, than use larger image. it is generally good practice to prepare that some people could have very very large resolution displays...
Or scale it up, like #ankitapatel mentioned: with background-size:cover;.
Use 2 things as suggested
body {
margin : 0px; //add this
}
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: fixed; //change fixed to cover entire
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
I am attempting to use 100vh to make a background-image always have a height per the size of the screen. What I am wanting to do is use the same image for each viewport and allow the overflow: hidden to make due of the access width. In essence, narrowing the image more vertically. However, my attempt is not working. The background-image is not adjusting to the 100vh.
Does anyone see what I am doing wrong?
#home-cover1 {
background-image: url("/images/home-cover1.jpg");
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
width: 100%;
position: relative;
}
#home-cover1-wrap {
background-color: rgba(0,0,0,0.3);
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
<div id="home-cover1">
<div id="home-cover1-wrap">
</div>
</div>
Change CSS I think background-size: cover; is Best
#home-cover1 {
background-image: url("https://optimumwebdesigns.com/images/home-cover1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
position: relative;
}
Your #home-cover1 background-size lack the 100% of height, change background-size: 100%; to background-size: 100% 100%;
I want a particular picture to cover the entire background of my site and when the window is resized, I want the picture to be scaled accordingly. What I'm looking for is something like https://www.tumblr.com. Notice the picture in the background scales accordingly to the window size.
Here is my css:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Where #backdrop is the id for the image I'm using.
I've tried numerous things but nothing seems to change the way my image is displayed.
Use object-fit to let an img behave like a background-image. See this working example:
html, body {
height:100%;
margin:0;
padding:0;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<img src="http://lorempixel.com/g/1100/300">
Two things:
Change the height: auto; to height: 100%, and add background styles.
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url("image.jpg") center center no-repeat;
background-size: cover;
}
Also, use a HTML 5 Doctype:
<!DOCTYPE html>
Here's my JSFiddle
html, body {
height: 100%;
}
#background {
height: 100%;
background: url(http://phosproject.com/wp-content/themes/phos_theme/images/7.jpg); no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.button {
position: absolute;
top: 50%;
left: 50%;
width: 440px;
height: 460px;
margin-top: -230px; /* Half the height */
margin-left: -220px; /* Half the width */
}
On my website the background seems to have a white border around it and makes it look bad and i was wondering how i could remove it.
The html body has a default margin. You need to remove it.
body {
margin: 0;
}
Updated fiddle.