Grow your CSS skills. Land your dream job.

A newbie css problem

  • # February 5, 2013 at 10:56 am

    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.

    # February 5, 2013 at 11:03 am

    post this on codepen.io

    # February 5, 2013 at 11:16 am

    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.

    # February 5, 2013 at 12:25 pm

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

    # February 5, 2013 at 1:07 pm

    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?

    # February 9, 2013 at 3:43 am

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

    # February 9, 2013 at 4:44 am

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

    # February 9, 2013 at 10:36 am

    @techaboard,
    Here’s a [fork of your pen](http://codepen.io/wolfcry911/pen/vKJFg “”) with the minimum amount of CSS needed.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".