CODEWITHSUNDEEP
htmlcss
gNerb
gNerb

Reputation: 887

HTML Optimization Query - Background image

I do web dev stuff mostly as a hobby. I'm used to XHTML 1.0/CSS3 using a table layout.

I'm trying to update my skill set and match industry standards more closely. The template I'm working on now uses the HTML5 doctype, CSS3 and divs for organization instead of a table.

My primary question is related to background images and optimization. I have a div that acts as the main body with a smaller div within to hold the actual content (and 2 divs to aid with positioning):

    <div id="Body">
        <div class="BD L BG"> &nbsp; </div>
        <div class="BD C">
            <div id="Content">
                &nbsp;
            </div>
        </div>
        <div class="BD R BG"> &nbsp; </div>
    </div>

I have a 150px x 150px square background image.

The question is: Should I repeat the image across x axis of the body div Or should I place 1 square in each of the smaller divs?

.BG {
background-image:url('./images/BDBG.png');
background-repeat:no-repeat;
background-size:100% 150px;
}

or

#Body {
width:100%;
min-height:760px;
padding:0px;
margin:0px;
background-image:url('./images/BDBG.png');
background-repeat:repeat-x;
}

To me it seems like it would take more memory/processing to repeat the image and the image would technically exist behind the content div, which has a white bg-color rendering it invisible.

I know it seems like a silly thing to focus on and probably wont have a major impact but every little bit helps.

Live demo available: http://proofoftheilluminati.com/test/ (using option 1)

Upvotes: 0

Views: 137

Answers (1)

Graham T
Graham T

Reputation: 966

Multiple DIVS would result in the browser having to paint each seperate div, and thus higher rendering times.

If you use Chrome, open the Dev Tools > Timeline and run some tests..

Upvotes: 3

Related Questions