Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 16, 2016 at 3:22 pm #712930
    fanlokbun

    Hi I want to add a repeating background image to the header to form a stripe. I have followed the instructions in this thread but can’t get it to align properly. https://kriesi.at/support/topic/how-to-add-a-header-background-image/

    The image is 7 x 88px. Here:
    http://fordtractorsales.co.uk/wp-content/uploads/2016/11/fts-header-back.png

    It also needs to shrink with the header when you scroll down.

    Thanks
    Rob

    November 17, 2016 at 5:42 am #713361
    Rikard

    Hi Rob,

    Please try the following CSS:

    
#header {
    background-image: url(https://fordtractorsales.co.uk/wp-content/uploads/2016/11/fts-header-back.png);
    background-repeat: repeat-x;
}

    Best regards,
    Rikard

    November 19, 2016 at 2:39 pm #714348
    fanlokbun

    Hi Rikard,
    It didn’t work but I have given up on the idea for now. I have gone for a static image. Is there any way to get this background image to shrink with the header like the logo does?
    Thanks
    Rob

    November 20, 2016 at 1:06 pm #714486
    Basilis

    Hi!

    That would need some advanced CSS for the area to make it work.
    Please do considder to hire a freelancer, who will be able to help you wioth the process

    Regards,
    Basilis

    November 25, 2016 at 5:39 pm #716955
    fanlokbun

    Okay thanks. What is the best css to use to hide the background header image on mobile? This is the css that adds it:

    .header_color .header_bg {
    background: #006699 url(//fordtractorsales.co.uk/wp-content/uploads/2016/11/Ford-Tractor-Spares-Header-Tractor-88.png) bottom center no-repeat scroll;
}

    Ta
    Rob

    November 25, 2016 at 7:37 pm #717010
    Basilis

    Hi!

    You can use media queries and replace the background here, with a color:

    CSS Media Queries & Using Available Space

    Let us know if we can do anything else.

    Cheers!
    Basilis

    November 29, 2016 at 3:29 pm #718273
    fanlokbun

    Hi Basilis,
    I have tried a few different ways but none work. This is what I expected to work:

    @media only screen and (max-width: 767px) {
.header_color {
    background: #006598 !important;
}}

    Can you see what I have done wrong?
    Thanks
    Rob

    December 4, 2016 at 5:37 am #720137
    Vinay

    Hi,

    Just remove the stripes on the logo and use the below css. It should work as you intended to do it.

    Background-size property can be used but that will not be a accurate solution. https://css-tricks.com/almanac/properties/b/background-size/

    I cannot see the repeating background that you are trying to hide in mobile so i’m unable to help you with the css. Please share a precise link if you want to still do that.

    To add a background image with color to the header please use css in this format

    background: #6DB3F2 url('images/checked.png');

    http://stackoverflow.com/questions/8195215/css-background-image-on-background-color

    #header_main {
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    box-shadow: inset 0px 5px 0px #c30000, inset 0px -5px 0px #c30000;
    background: #000;
}

    Best regards,
    Vinay

    December 6, 2016 at 2:40 pm #721013
    fanlokbun

    Hi Viney,

    Many thanks but as per 3rd post I gave up on the idea of a striped background. The client wanted a picture of a tractor instead. What I am trying to do is hide that background picture of a tractor on small screens as it gets overlapped by the logo. I tried this code but it didn’t work:

    @media only screen and (max-width: 767px) {
.header_color {
    background: #006598 !important;
}}

    Thanks
    Rob

    December 8, 2016 at 3:25 pm #722012
    Nikko

    Hi Rob,

    Try adding this code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  .header_color .header_bg {
    display: none !important;
  }
}

    Hope this helps. :)

    Best regards,
    Nikko

    December 8, 2016 at 3:54 pm #722034
    fanlokbun

    Thanks a lot Nikko. That got rid of the color as well so I cobbled both together and this works:
    @media only screen and (max-width:767px) { .header_color .header_bg { background: #006598 !important; } }
    Thanks again for your help

    December 9, 2016 at 9:37 am #722355
    Nikko

    Hi fanlokbun,

    Glad we could help :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Repeating header image.’ is closed to new replies.