WordPress.org

Ready to get started?Download WordPress

Forums

How to get banners to go across whole width / not repeat (8 posts)

  1. mixmastermichael
    Member
    Posted 3 years ago #

    Hi there,

    So I have this site where I need all of the banners to go across the entire width of the pages.

    The was I have it set up now is close, but how do I get the banners to not repeat and go across the entire width of the page?? Tried a lot of stuff without much luck.
    http://www.moko.com.php5-21.websitetestlink.com/?page_id=6

    This site is an example of how it should look.

    Any help would be greatly appreciated.

    Thanks

  2. Jason (Theme Blvd)
    Member
    Posted 3 years ago #

    So, the site you're linking to is not what yours', right? You should post a link to site you're working on so people can see the problem in order to try to help.

  3. mixmastermichael
    Member
    Posted 3 years ago #

    Sorry, yes, that's the site that is mine... just want the banner to go across the entire width of the page if possible . Forgot to post second link in orginal post. My mind= fried right now.

    This is my site
    http://www.moko.com.php5-21.websitetestlink.com/?page_id=6

    this is the site I would like the banners to look like... see how it goes across the entire width?

    http://www.zamarestaurant.com/

  4. Jason (Theme Blvd)
    Member
    Posted 3 years ago #

    No worries, try this...

    In style.css, find this:

    .page-id-6 #banner {
    	clear: both;
    	height: 453px;
    	background: transparent url(images/moko_header_lookbook.jpg);
    	border-bottom: 1px solid #6caedf;
    }

    And change it to this:

    .page-id-6 #banner {
    	clear: both;
    	height: 453px;
    	background: transparent url(images/moko_header_lookbook.jpg) top center no-repeat;
    	border-bottom: 1px solid #6caedf;
    }

    In CSS, you can't stretch a background image, so the change I've suggested is to center it and make it not repeat. This is generally what most people do. In the example that you linked to, if you stretch the browser window bigger, you'll notice that is what they did, as well. So, if you're stuck on wanting the image to cover full width on larger screen resolutions, you'd need to use a larger image.

  5. mixmastermichael
    Member
    Posted 3 years ago #

    Thanks for the tips man. Used those styles you suggested and seemed to have worked... looks better centered, but not ideal really.

  6. Jason (Theme Blvd)
    Member
    Posted 3 years ago #

    Another approach you could do, too, is a combination of using a wider image and then fading out the sides of the image to a solid color (with a photo editing software like Photoshop). Then you'd set that color as the background color on the div wrapping your banner. Just an idea.

  7. mixmastermichael
    Member
    Posted 3 years ago #

    Hi there, thanks for the help earlier. Going to ask the client for wider background images.

    One more thing... on the home page at the bottom of this post, I need to have the menu be able to contract and stay centered when you make your browser window smaller...

    To illustrate what I mean, when you visit this page where I have it working, the menu contracts / centers always when you have a small window open viewing the site.
    http://www.moko.com.php5-21.websitetestlink.com/?page_id=54

    I need to have the same functionality on the home page though... when you visit this page and have a small window you'll see that it always stays put for some reason... set margins to auto and removed any padding so I really can't figure this one out..
    http://www.moko.com.php5-21.websitetestlink.com/

    Lil help?

  8. Jason (Theme Blvd)
    Member
    Posted 3 years ago #

    Did you figure this out? When I look at both pages you linked to, the menu at the bottom reacts the exact same to re-sizing the browser window.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.