I am writing a website and I have a problem. The background picture is not enlarged.
Here is a picture:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="reset.css">
</head>
<body>
<header class="header">
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
CSS:
.header{
background: url(images/Group2264.svg) no-repeat;
position: absolute;
width: 3000px;
height: 2000px;
left: 0px;
top: 0px;
}
Help me with this please!
The first commenter was right, but you need to use it like this:
.header{
background: url(images/Group2264.svg) no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
background-size: cover; : "sets the size of the element's background image" - MDN.
OR
width: 100%; : to fill up the parent 100%, width wise. (very pseudo responsive)
height: 100%; : to fill up parent 100%, height wise. (very pseudo reponsive)
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>
I am trying to put a background picture with medium opacity but unable to do so, here's my html:-
<body style="margin:auto;width:100%;height:100%;opacity:0.1;background-image:url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg')">
</body>
Use div instead of body tag. And give a particular height to that div.
<!DOCTYPE html>
<head>
<title>Your favourite travle partner</title>
</head>
<body>
<div style="margin:auto;width:100%;height:400px;opacity:0.1;background-image:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg')">
</div>
</body>
</html>`
Instead of adjusting the body elemet, add an extra div to hold the background, better to separate the style into a css file.
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
<title>Your favourite travle partner</title>
</head>
<body>
<div id="background"></div>
</body>
I want to make a page,which by scroll down ,the content div ,cover the back ground image.so I put a background image for body and create 2 divs, it works in big window size, but when I change the size of window, and make it smaller (to test the responsive), there is a white gap between image and content div.
Would you please help me to remove it?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>first</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="css/first.css" rel="stylesheet">
<style>
body{
background: url("https://kalamarie123.files.wordpress.com/2012/03/img_7815-2.jpg") no-repeat top center fixed;
background-size:100%;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="content">Lorem Ipsum is simply dummy text of </div>
</body>
</html>
.cover{
height: 1232px;
width: 100%;
margin: 0;
padding: 0;
color: white;
text-align: center;
}
.content{
width: 100%;
height: 100%;
background: gray;
margin: 0;
padding: 0;
}
You need to make the body and the html go to the bottom of the page:
body, html {
min-height: 100%;
}
and then set the background to background-size: cover;: https://css-tricks.com/perfect-full-page-background-image/
You could do something like this:
<div id="yourdiv"></div>
#yourdiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope it helps!
Sounds like it's probably due to your background image not filling the full space available.
Try adding this to the body (the element with the BG image);
background-size:cover;
Note that this will not work well on old browsers
I am trying to get this div to be all the way to the right side of the screen. here is the html:
<html>
<head>
title></title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<h1> </h1>
<body>
<div id="bannerR">
<a href="yahoo.com" target=_blank>
<img src="yahoo.com" border=0></a>
</div>
and here is the style.css
#header{background-color: #fff; width: 1000px; position: relative; }
#bannerL{ position: relative; top: 500px; left: 500px; }
#bannerR{ position: relative; float: right; }
body {
background-image: url("beach.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
margin-top:100px;
margin-right:180px;
margin-bottom:10px;
margin-left:200px;
}
please help, Im very new at code and bought a book but that hasnt helped. I have spent few hours trying to get this and to no avail.
Your body styles contain margin-right:180px. Because of that the #bannerR will never float all the way to the right. Remove that style and it'll work. Here is some code:
body
{
background-image: url("beach.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Here's a fiddle to show it in proof: http://jsfiddle.net/rzKaz/1/
Make sure your DIV isn't contained within an element with restricted space (doesn't span the entire width of the page)
Make sure you link the css file to the HTML so the browser knows what css files you are using.
<html>
<head>
<link rel="stylesheet" type="text/css" href="your_style.css">
</head>
<body>
<!-- YOUR HTML -->
</body>
</html>
Quite new to CSS3 and I have a issue with the DIV not changing height as the background-image get's larger (height). The DIV should expand as the background image is expanding. After this DIV there will be a footer with fixed height.
The web page:
http://www.cre.fi/kalustekeskus/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
background-image: url(../img/kalustekeskus_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
min-width: 1024px;
width: 100%;
min-height: 90%;
position: fixed;
overflow: hidden;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kalustekeskus</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="full-screen-background-image"></div>
</body>
</html>
Is there any smart way of doing this?
Thanks!
In the website you have used min-weight:600px; change this to min-height:90%.
You can specify the min-height in percentage then the div will expand with respect to the actions you do in the image.