I have the header structure of my page as
<header>
<div class="clouds"></div>
</header>
The clouds do not change by the change in width of the screen. I want to make them responsive. How can I do with CSS.
I currently use the following CSS Code.
header{
width:100%;
height:100%;
}
.clouds{
z-index: -98;
position: absolute;
top:0px;
left: 0px;
width:100%;
background: url('../images/clouds.png') repeat-x;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100% !important;
height: 30%;
min-width: 960px;
}
You should not add the height and width, this should do it at a bare minimum
background: url('../images/clouds.png')
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Use CSS media queries to do this.
Here is sample code for responsiveness:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100%;
border: 1px solid #555;
font: 14px Arial;
background-color:red;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: left;
display: box;
box-orient: horizontal;
}
.box > div:nth-child(1){ background : #FCC; -webkit-box-flex: 10;
}
.box > div:nth-child(2){ background : #CFC; -webkit-box-flex: 20;
}
.box > div:nth-child(3){ background : #CCF; -webkit-box-flex: 30;
}
.box > div:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div>HTML5</div>
<div>CSS3</div>
<div>Javascript API for HTML5</div>
</div>
</body>
</html>
Your code is working fine for me. Although you have some bad codes.
You dont have to
header{
width:100%;
height:100%;
}
if your going to make your .cloud 100% width, and the height is not necessary.
Maybe you thought it's not working because of the min-width. Which limits your .clouds minimum width. So if you are re-sizing it below your min-width. Your .clouds width doesn't change to your screen size.
And don't listen to the others who uses media query, for this basic responsiveness you don't have to use media query.
header{
width:100%;
height:100%;
}
.clouds{
z-index: 98;
position: absolute;
top:0px;
left: 0px;
width:100%;
background: url('../images/clouds.png') repeat-x;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100% !important;
height: 30%;
}