Adding an background image behind the header?

Forums ยป WordPress ยป Roseta ยป How To

  • Author
    Posts
  • #102197
    jan__
    Power User

    Hey ๐Ÿ™‚

    Can I add an full-width background image behind the header and/or the menu-section in Roseta or Roseta plus?

    I didnt found such an option.

    Thanks!

    #102233
    Zed
    Cryout Creations Team

    The header area is not designed to use a background image (the header image itself, displayed below the menu, performs the task of being the image in the header).

    If you’re looking to apply some kind of texture to the header/menu area, try the following CSS:

    body .site-header-top, body .site-header-bottom > div {
        background-image: url(...);
        /* other positioning attributes: https://www.w3schools.com/cssref/pr_background-image.asp */
    }

    If you like our creations, help us share by rating them on WordPress.org.
    Please read the available documentation and search the forums before posting.
    #102274
    jan__
    Power User

    Thanks, Zed ๐Ÿ™‚

    Yes, a texture-effect is what i’m looking for.

    I decided to apply this only to the “.site-header-top” and not to the menu.

    But now the texture image end at both sides of a wide screen. Maybe the container ends after 1300px width?!

    My code used:

    body .site-header-top > div {
        background-image: url("wood.png");
      background-repeat: repeat; 
      background-size: cover; 
    	  height: 220px;
    }

    Nether “repeat” nor “cover” was fixing this.

    Website: www.screenpresso.com/=pvHJ

    #102582
    jan__
    Power User

    Can you give me an code-snippet, how to get a texture-background-image on .site-header-top, which is “full screen width“?

    See screenshot and code above.

    #103441
    Zed
    Cryout Creations Team

    The screenshot link is no longer available. Is the site publicly accessible?


    If you like our creations, help us share by rating them on WordPress.org.
    Please read the available documentation and search the forums before posting.
Viewing 5 posts - 1 through 5 (of 5 total)

You need to log in to reply to this topic.