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.
Related
I have a background image for a webpage that is too big, and in general, I want to prevent scrolling on the webpage. The HTML looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
Test
</div>
</body>
</html>
and the CSS looks like
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
body {
background-image: url("bg.jpeg");
background-size: cover;
background-clip: padding-box;
display: table;
}
This code mostly achieves the desired effect (background image looks good and scrolling is prevented); however, in iOS Safari, the overflow: hidden; (which prevents scrollbars/scrolling) seems to introduce ~1px of white space around the right and bottom of the display area. I can get rid of the margin by doing something like padding: 1px instead of padding: 0, but then the scrollbars come back. Any ideas on how to get rid of this small whitespace while still preventing scrolling?
I tried adding a wrapper <div> for all the <body> content and setting the background and overflow properties on the <div>, but still didn't have luck (either got scrollbars or the odd small margins on bottom and right).
While I am not entirely clear why you get that white band(s) a slightly hacky workaround would be to put the background onto a before pseudo element which you make just slightly larger than the body.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
body::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: calc(100% + 1px);
height: calc(100% + 1px);
background-image: url(https://picsum.photos/id/1015/1024/1024);
background-size: cover;
background-position: center center;
background-clip: padding-box;
}
body {
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
Test
</div>
</body>
</html>
I got an background-image of a big white square, and now I'm trying to keep a div positioned in the corner of that square, but when I resize the page, that div don't follow that corner. I suppose that occur because of the background-size: cover;, since that condition keep zooming in/out when resized.
I also would like to keep that square in the proportion of the white square.
background-image and div in normal size:
resized background-image and div:
I'm already using position absolute and relative.
I've been trying to use only flexible values (vh/vw, %)
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.bg {
background-image: url("https://i.pinimg.com/originals/3b/6a/ed/3b6aede10e30d93886268de33d67039e.jpg");
height: 100vh;
width: 100vw;
background-size: cover;
position: relative;
}
.el {
width: 5%;
height: 5%;
position: absolute;
left: 13.8%;
top: 28.5%;
background: orange;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="bg">
<div class="el"></div>
</div>
</body>
</html>
One problem is that the image you are using as the background is not only a "black square" since it has white paddings.
If you want everything to align in the box, you either need to:
calculate how much the image has paddings before the box (which I don't recommend doing).
crop the image a bit, removing the white padding.
Here are the calculations after getting rid of the white paddings, and leaving just the borders. You can mess around with the width, height, left, and top for more desired results.
.bg {
background-image: url("bg.jpg");
height: 50vh;
width: 50vh;
position: relative;
margin: 25vh 25vw;
background-repeat: no-repeat;
background-position: center;
background-attachment: initial;
background-size: cover;
}
/* Calculating the "borders" of the image out of the width and height, in this case 1.7% * 2 */
.el {
width: calc(100% - 3.4%);
height: calc(100% - 3.4%);
position: absolute;
left: 1.7%;
top: 1.7%;
background: orange;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
My image has a little bit of white at the bottom, since I cropped the picture a bit badly. Your element width& height ratio should always be 1:1, if you want the .el to work.
Also, if the purpose is just to make a box with black borders, you might want to do it with just HTML and CSS, since it's definitely more complex using background images =)
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>
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've checked everywhere that I can think of, no luck. I have a page I'm trying to make responsive. Pretty much one div on top of the other with a css background image inside. When I change the browser window size the image seems to scale pretty well but the div height doesn't so you can see the background of the div. I need the div height to change in proportion to the image size. I'm trying to use CSS only without javascript since I'm brand new to web design. Any help would be great.
Here is the code I've got.
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Home Page</title>
<meta name="description" content="The best toy out there">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--<h1> Body Text</h1>-->
<div id ="top_pic">
<hgroup> </hgroup>
<h1> top_pic; SOME TEXT WILL GO HERE</h1>
<!-- A logo image will also be placed on top of background image in this div probably in the hgroup -->
</div>
<div id = "middle_pose">
<h1 class = "midposetext"> MIDDLE pose div, some text goes hereAAA</h1>
</div>
<div id = "content">
<h1> Content div...some text goes here</h1>
</div>
<div class = "footer">
<h1> Footer div</h1>
</div>
</body>
</html>
The CSS:
body {
background-color : #e8e821;
width: 85%;
height: 100%;
margin: 0 auto;
border: dotted black;
position: relative;
padding: 1%;
}
#top_pic {
background-image: url('images/eyeforheader1.jpg');
background-size: cover;
background-repeat: no-repeat;
border: solid #3fa85f;
margin: 0 0 20% 0;
width: 100%;
height: 100%;
display: block;
}
#middle_pose {
/*background-image: url('images/girl on back grasping sheets brunette.png');*/
background-image: url('images/Screen Shot 2014-02-10 at 11.47.48 PM.png');
background-size: 100%;
background-repeat: no-repeat;
background-color: #7547dd;
width: 100%;
height: 450px;
border: solid #f05858;
margin: auto;
}
#content {
background-image: url('images/Screen Shot 2014-05-28 at 5.52.03 PM.png');
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 500px;
border: solid orange;
}
.midposetext { color: #de4b8f;
}
#middle_pose h1{
color: yellow;
z-index: 10;
font-size; 1.4em;
}
In your CSS file, you can change the #middle_pose background-size property:
from:
background-size:100%;
to:
background-size:cover;
This will scale the background image to be as large as possible so that the container's background is covered. However, this may force portions of the image to be out of the viewable area (at certain dimensions). In this case, you may find that you want to use media-queries to adjust the container's dimensions and/or swap the image for one with more appropriate dimensions/aspect-ratio.
Hope this helps :)