Forums

techaboard

See i have this code for

[div id="wrapper"]
[header][img src="logo.png"][/header]
[/div]



html
{
width:100%;
height:100%;
padding:0;
margin:0;
max-width:100%;
max-height:100%;
overflow:auto;
background-attachment:fixed;
background-color:black;
}
body
{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
max-width:100%;
max-height:100%;
overflow:auto;
background-attachment:fixed;
background-color:black;
}
#wrapper
{
position:relative;
height:100%;
width:100%;
padding:0;
margin:0;
background:url("background.jpeg");
background-repeat:no-repeat;
background-color:black;
max-width:100%;
max-height:100%;
overflow:auto;
background-attachment:fixed;
}
header
{
position:relative;
left:25%;
max-width:100%;
max-height:20%;
height:20%;
}
header img
{
display:block;
position:relative;
width:50%;
height:70%;
max-height:70%;
max-width:50%;
}

the problem is that when i zoom out in the browser the logo remains of the same size but everything else becomes small but i want that the image also becomes small as i resize.Here is the link to the screenshot image http://postimage.org/image/xg3fbn7s5/ .I am new in css so please help me I really appreciate it.

djrolstad

post this on codepen.io

Paulie_D

header img
{
display:block;
position:relative;
width:50%;
height:70%;
max-height:70%;
max-width:50%;
}

Off hand, I would say this is the problem. Try removing the set width / height, especially as you have already set max values.

Also, there seems to be a lot of unnecessary/repeated css & positioning listed in your stylesheet. You might want to think about removing a lot of it.

techaboard

http://codepen.io/anirudhm/full/beCui Here is the link for codepen Please help me.I am a beginner in css

kevin11189

As @Paulie_D mentioned there is a lot of unnecessary/repeated CSS in there.

What it comes down to, is that all of it's parents divs are set to 100%. This means that these are going to 100% of the width of the browser window. In this example, the width of this image is 50% of that. So, in turn, the width of that image is going to be 50% of the browser window no matter the zoom or width.

Do you follow what's happening with that?

techaboard

How can i improve this code? I removed all the unnecessary size declarations but it still happens

Paulie_D

Where is your new code...have you updated your Codepen?

wolfcry911

@techaboard, Here's a fork of your pen with the minimum amount of CSS needed.

treehouse : what would you like to learn today?

Forums

A newbie css problem