I'm trying to create a background image to be displayed on a div. But when called, it doesn't display. But when I call it on the entire body, the image is being displayed. What am I doing wrong? Thanks in advance.
<!DOCTYPE>
<html>
<head>
<title>CSS image placement</title>
<style>
#header{
background-image: url('bg.jpg');
background-size: cover;
padding: 0px;
margin: 0px;
border: 0px;
}
</style>
</head>
<body>
<div id="header"></div>
</body>
</html>
****** EDIT ******
I'm adding the code that I edited and tried again with your help. Still no luck when I call the style on div.
<!DOCTYPE>
<html>
<head>
<title>CSS image placement</title>
<style>
#header{
background-image: url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
border: 0px;
width:50px;
heigth:50px;
}
</style>
</head>
<body>
<div id="header" ></div>
</body>
</html>
Your #header is 0px x 0px big. Give it a size (width and height) and you should be good.
you forget to set height and width.,
#header{
background-image: url('bg.jpg');
background-size: cover;
padding: 0px;
margin: 0px;
border: 0px;
width:100%;/* what size you need to add here */
heigth:50%;
}
Give your #header some height. It will work.
Try this -
#header {
background:url(image.jpg) no-repeat;
height:50px;
width:50px;
}
Its because of Height and Width. Specify height and width.
height: auto;
width: 100%;
and also indicate no-repeat.
please give the height like
#header{height: 100px;}
Related
I have problem making my banners up and down my webpage scale to always fit the user's screen so I don't have horizontal scroll bars which is bad experience on mobile phones as desktops as well. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<style type="text/css">
body {
background-image: url("TBG_02.jpg");
background-color: #cccccc;
background-size: cover;
background-repeat: no-repeat;
}
#top,#bottom{width:100%;}
#top,#bottom{height:155px;}
#top{position: fixed;left:0;top:0;}
#bottom{position: fixed;right:0;bottom:0;}
.topp{background-image: url("BG_02.png");background-repeat: no-repeat;background-size: cover;}
.bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;background-size: cover;}
</style>
</head>
<body>
<div id="top" class="topp">
</div>
<div id="bottom" class="bottomm">
</div>
</body>
And this is how the problem looks like:
https://imgur.com/a/WscYr3D
You may notice the bad gray/white space in the photo as well. To note: I will add some images as buttons above the banners. Any ideas?
Your approach is basically sound in using:
background-size: cover;
to ensure that the browser resizes the image to cover the whole of the <body>.
What you are missing though, is that the height of the body does not cover the whole height of the viewport.
To fix this, you can add:
body {min-height: 100vh;}
ie. the height of the body must never be less than 100% the height of the viewport (or 100 viewport-height units).
Working Example:
body, .top, .bottom {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
body {
min-height: 100vh;
background-color: rgb(204, 204, 204);
background-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg');
}
.top, .bottom{
position: fixed;
width: 100%;
height: 45px;
background-color: rgb(0, 0, 0);
}
.top{
top: 0;
left: 0;
}
.bottom{
bottom: 0;
right: 0;
}
<div class="top"></div>
<div class="bottom"></div>
The answer from Rounin was cool but it made some troubles; the only thing it missed is that there is no image to put in the divs so they can appear on the banners, then I had to set their width and height and playing with them a bit until it fixed :D
<body>
<div class="top">
<img src="BG_02.png" class="top"/>
</div<
</body>
The following code is unable to place the image at the center of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url("../images/dandelion.jpg");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
This is what I am getting.
Your body is only as tall as the things inside it, so its actually centering correctly.
To get the result you want, you need to either make the actual page longer by adding things to it, or this to work around:
html,body{ height:100%; }
Note that you need to have html in there too because percentage height is relative to its parent (<html> is a parent of <body> in this case)
u may want to try something like this fiddle
body{
background-image: url("http://i.imgur.com/InDshke.png");
background-repeat: no-repeat;
background-position: center -25%;
background-size: 50%;
height: 100%;
width:100%;
}
Checkout this Fiddle (jsFiddle).
You need to reset default properties and give these some styles as your containers such as <html> and <body> are adjusted according to the content inside it (in this case the image).
Apply these styles:
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
background-image: url("http://placehold.it/200x200");
background-repeat: no-repeat;
background-position: center center;
}
Hope this helps!
Give html and body height 100% and background position 50% 50% or center center.
html {
height: 100%;
}
body{
background-image: url("http://i.imgur.com/InDshke.png");
background-repeat: no-repeat;
background-position: 50% 50%;
height: 100%;
}
Basically I am trying to do whats device here :
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
Have my image in the background has an id on a div.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png");
width: 324px;
height: 250px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center;
}
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="idbackground"></div>
</div>
</body>
</html>
instead of centering the image disappears..
You forgot a semicolon after your
background-image: url("http://i.imgur.com/7h8ejPJ.png")
Also add width and height property to your image div to 100%.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png"); /* add semicolon here*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center;
width:100%; /*add width*/
height:100%; /*add height*/
}
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="idbackground"></div>
</div>
</body>
</html>
The problem was you were setting a width and height and the image was wrapped within this, so the image was limited with in this boundaries and hence you see the part of image being not visible, and on scroll it completely gets hidden, because the image div is scrolled up..
background-image: url("http://i.imgur.com/7h8ejPJ.png") is missing ; in the end of line.
Your code is missing a semi-colon at the end of the declaration ... It should be
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png");
....
}
The semi-colon is required to separate between each declaration. It's only allowed to be removed if the declaration is the last one.
This workes perfectly for me.
#idbackground {
background: url(http://i.imgur.com/7h8ejPJ.png)
}
Like Reddy said, make your width and height equal to 100% in your image div.
Should you ever use a non-square image use min-width and min-height properties with a value of 100% to square up to whichever axis is larger.
Also if you'd like you can save yourself typing by consolidating all your background properties into one shorthand background property like such...
#idbackground {
background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center;
height: 100%;
width: 100%;
}
The shorthand syntax for the background property is as follows...
background: [color] [url(img.jpg)] [repeat_value] [attachment_value] [position_value(s)];
Just make sure you include spaces between each value and replace the bracketed items with the corresponding background- prefixed value. If left out or blank they will just be set to their default values.
Thus, a cleaned up version would be...
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center; /* consolidated background shorthand */
height: 100%;
width: 100%;
}
... with the same HTML markup.
I saw quite a few similar questions but could not find a fix.
Open this sample and resize the browser to make its height shorter
than the main div height, ~400 pixels.
When scrolling down, the background image attached to the body is cut off:
The code:
html { height: 100%; color: white; }
body { height:100%; padding: 0; margin: 0; background:url(bg.jpg) repeat-x; background-position: bottom; background-size: contain; }
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page { height:100%; }
#divHeader { width:100%; height:115px; }
#divMain { width:600px; height:400px; border: solid 1px brown; }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
</div>
</div>
</body>
</html>
I tried to move the background image to the pageWrap div as someone suggested.
It solves the vertical scroll problem, but creates a similar problem horizontally:
when the window is too narrow and you scroll left, the image is cut off on the right.
Any real solution?
You've got repeat-x value defined, then the background only repeats in the X axis (horizontally).
To solve this you've got two different solutions for two different purposes.
You can put repeat value to repeat in X and Y axis, but this have a problem because your background is a gradient, and if you repeat it in Y axis the visual effect will be bad.
The other solution (in my opinion the best solution) is to define that background covers the whole element. This can be achieved with the property background-size: cover.
The change will be that:
body {
background:url(bg.jpg) repeat-x;
background-size: cover;
}
Tell me if this solves your problem.
Exists another solution with the background-attachment property. It can be defined as fixed value and the scroll doesn't move the background.
body {
background:url(bg.jpg) repeat-x;
background-attachment: fixed;
}
Try these background styles:
background: url(bg.jpg);
background-position: 100% 100%;
background-size: cover;
Since repeating a gradient doesn't look that good, I guess you just want that background alwas cover your whole viewport and not scroll with it? That would be done with no-repeat and cover, like this:
body {
height:100%;
padding: 0;
margin: 0;
background:url(bg.jpg) no-repeat fixed;
background-position: bottom;
background-size: cover;
}
Use background-attachment: fixed on the body, like so:
html {
height: 100%;
color: white;
}
body {
height: 100%;
padding: 0;
margin: 0;
background: url(https://glaring-inferno-4496.firebaseapp.com/bg.jpg) repeat-x;
background-position: bottom;
background-size: contain;
}
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page {
height: 100%;
}
#divHeader {
width: 100%;
height: 115px;
}
#divMain {
width: 600px;
height: 400px;
border: solid 1px brown;
}
/*new code from here:*/
body {
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter">
<p>All Rights Reserved. Blabla® 2015</p>
</div>
</div>
</div>
</body>
</html>
You can use un a CSS property called overflow-y:auto and asign to the father component, of this way is puts a scroll bar when the viewport height reduce him size and your background image don´t cuts anymore.
Try something like this:
.father {
height: 100vh;
background-image: url(https://static.vecteezy.com/system/resources/previews/001/331/268/original/happy-halloween-from-the-spooky-castle-free-vector.jpg);
background-size: 100% 100vh;
background-position: center;
background-repeat: repeat;
overflow-y: auto;
}
.child {
height: 1500px;
}
<div class="father">
<div class="child">
<h1 style="color: white">¡Hello World!</h1>
</div>
</div>
I have a huge image (3000px on 2000px) and I would like to set this image as a background of website and adjust proportions of the image to the window. So far I am doing this:
body {
background: url('image.jpg') !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: center !important;
}
The image is set up on the background, but it's not completely visible - just the "center" of the image, not the whole image.
Is there any way to do it with using CSS?
I think you want this:
* {
margin: 0px;
padding: 0px;
border: 0px groove;
}
body {
width: 100%;
height: 100%;
background-image: url(picture);
background-size: 100%;
}
Use background-size:100%;
Also, Check this link for further reference.
You can do the following in your css
html
{
height:100%;
width:100%;
}
body{
margin:0px;
padding:0px;
height:100%;
width:100%;
background-image: url(picture);
}
to remove any margins or padding and set the Body to full
to do it with html page only
<html>
<body background="bgimage.jpg" style="height:100%; width:100%;">
<h1>Hello world!</h1>
</body>
</html>
See the W3schools example below
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_body_background