Background Image question

  • Resolved AmandaEve

    (@amandaeve)


    9 years, 10 months ago

    So I have a background question and I need some opinions on the best way to go about it.
    I have a wooden background that I was going to tile to save on load times … but now the client says they want something up in the corner of the page behind the layout (see image)

    http://awesomescreenshot.com/030313sn33

    So I though I could keep the background as tiled, and use a z-index to position a PNG on the wood – but under the white layout box.

    Then I thought maybe I could do it another way, but the responsive-ness but get all wonky then. :s

    Whats the best way to achieve this?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 10 months ago

    The wood doesn’t look like it has symmetry that you can tile or repeat, and yes if you’re using a responsive theme the PNG positioned on top of the wood would have to behave responsively, e.g.:

    @media screen and (max-width: 320px) {
 .thatPNG {
   display: none;
 }
}

.thatPNG {
 display: block;
}

    Thread Starter AmandaEve

    (@amandaeve)

    9 years, 10 months ago

    yeah, that’s not the wood I’m using – that was just a screnshot of an example the client wanted.

    I’m working with using this:

    body {background: url(http://www.redesign.chinchedbistro.com/wp-content/uploads/2014/06/ChatcutrieBG.png),url(http://www.redesign.chinchedbistro.com/wp-content/uploads/2014/06/darkwoodbg.jpg);background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
    }

    think that would be cool?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 10 months ago

    Yes, the code itself is fine.

    Thread Starter AmandaEve

    (@amandaeve)

    9 years, 10 months ago

    really? Score … YAY!

    Thread Starter AmandaEve

    (@amandaeve)

    9 years, 10 months ago

    #SelfResolved

    Thread Starter AmandaEve

    (@amandaeve)

    9 years, 10 months ago

    wait … one question – if I wanted this images … fixed … what`s the syntax for that in this context?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 10 months ago

    The element the background image is applied to, preferably not the <body>, should be given fixed position:

    position: fixed;

    Thread Starter AmandaEve

    (@amandaeve)

    9 years, 10 months ago

    body {background: url(http://www.redesign.chinchedbistro.com/wp-content/uploads/2014/06/ChatcutrieBG.png),url(http://www.redesign.chinchedbistro.com/wp-content/uploads/2014/06/darkwoodbg.jpg);background-repeat: no-repeat, no-repeat ;
background-position: fixed, right top ;

    would that be right? Or am I appling it to body again?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 10 months ago

    Maybe you want to use background-attachment instead:

    body {
    background:
        url(http://www.redesign.chinchedbistro.com/wp-content/uploads/2014/06/ChatcutrieBG.png) no-repeat fixed,
        url(http://www.redesign.chinchedbistro.com/wp-content/uploads/2014/06/darkwoodbg.jpg);
}

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 10 months ago

    http://www.w3schools.com/css/css_background.asp

    Thread Starter AmandaEve

    (@amandaeve)

    9 years, 10 months ago

    excellent …. i’ll look into it. Thanks a bunch Andrew.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Background Image question’ is closed to new replies.