WordPress.org

Ready to get started?Download WordPress

Forums

Adding gradient image to sides of my website (4 posts)

  1. JohnnyScience
    Member
    Posted 3 years ago #

    Not sure what happened to my other thread, anyways here is some info:

    http://www.visionaryresearchchems.com

    Ok, so right now I had added this to the outside of the doctype in the index.php, and it gave me the right & left borders of my graidient image, but was not working on all pages, but I have since removed it as I was told it was wrong:

    <div id="outerWrap">
    <div id="innerWrap">

    Am I going to want to use the same HTML for editing the header instead? Or something completely different?

    If not, exactly what should I be adding to the header.php (And where)

    And what should I be adding to the body tag of CSS?

    This is the CSS I had added to index.php when I had the outer/inner wrap:

    #outerWrap {
    width: 1000px;
    margin: auto;
    background: url(http://visionaryresearchchems.com/wp-content/uploads/2011/01/blueleft.png) repeat-y left;
    }
    #innerWrap {
    width: 1024px;
    background: url(http://visionaryresearchchems.com/wp-content/uploads/2011/01/blueright.png) repeat-y right;
    }

    Someone mentioned adding it directly to my body tag in CSS & thus I did this, but it didnt seem to work:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	<strong>background: transparent, url(http://visionaryresearchchems.com/wp-content/uploads/2011/01/blueleft.png) repeat-y left, url(http://visionaryresearchchems.com/wp-content/uploads/2011/01/blueright.png) repeat-y right ;</strong>
    	border: 0;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    body {
    	line-height: 1;
    }

    What am I doing wrong?

  2. businesslogs
    Member
    Posted 3 years ago #

    Who made your background gradients? My suggestion is to "cut" it differently. You don't need two images on either side of the page. What you need is one image that is a little wider than your layout with the gradient going from left to right, and only 1-pixel high. The dark blue of the gradient should be your current background color.

    Use CSS to center align the background image and tile it vertically. Here's the code:

    body {
    background: #3a6a8e url(URLOFIMAGEHERE) 50% 0 repeat-y;
    }

    3a6a8e is the hexadecimal color of your page right now.

    This line is incorrect syntax so take it out:

    <strong>background: transparent, url(http://visionaryresearchchems.com/wp-content/uploads/2011/01/blueleft.png) repeat-y left, url(http://visionaryresearchchems.com/wp-content/uploads/2011/01/blueright.png) repeat-y right ;</strong>
  3. marjiec
    Member
    Posted 3 years ago #

    Good, you removed the code, now put it in the header.php right after the body tag and before the wrapper tag.
    I assume you still have the closing div tags in the footer.php
    if not put them back.

  4. JohnnyScience
    Member
    Posted 3 years ago #

    Awesome, Thanks marjjec, it seems to now be working fine across all pages.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.