StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Beautiful Pro – Full Width Custom Background Image

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Beautiful Pro – Full Width Custom Background Image

This topic is: resolved

Tagged: ,

Viewing 9 posts - 21 through 29 (of 29 total)
1 2
  • Author
    Posts
  • June 27, 2015 at 2:36 pm #157694
    Erik D. Slater
    Member

    and?

    June 27, 2015 at 2:56 pm #157697
    Erik D. Slater
    Member

    The problem - as far as I can see - simply boils down to your banner image being too small, width-wise.

    In your CSS (going back to http://design.pinkheelspinktruck.com/), when you set the background-size to cover - and it's not wide enough to fit the entire width of the screen - the image will expand proportionally to fit inside the 387px container.

    That is the reason why your friend noticed the chopped off effect ... both at the top and the bottom.

    June 27, 2015 at 3:06 pm #157701
    Erik D. Slater
    Member

    The reason I asked if you had read the setup page is because there is a note in there that says the following:

    Note: This background image will work best if it is exactly 200px high. Taller images will display only the middle 200px on the screen. The image included in the theme is 2000px wide and intended to not be repeated. Experimentation may be needed to find an image that will work well in this location. The site banner is not intended to be used as a header.

    Obviously, the height can be changed. But the critical takeaway is the bit in bold. In your case, because the width of your banner image is only 1279px wide, you are only going to see the middle 387px.

    Unless you allow it to repeat (which isn't desirable), the easiest solution is to make it wider as recommended by the theme notes. Other solutions exist ... but let's not go there 🙂

    June 27, 2015 at 4:13 pm #157703
    skichic95
    Member

    I was never using the Site Header to begin with because of where it was set to display and the size it was going to display. That is why I used the daisy area shown in the theme demo (which you see in the design.pinkheelspinktruck.com). The site header is hidden on that site. When I had other people look at it, it was chopping off the top portion of that space after I hid the site header.
    I was trying to use the existing features of the theme without having to make any drastic changes to the actual site header...which again, I hid because it was just extra white space appearing above my "header" graphic.

    June 27, 2015 at 4:17 pm #157704
    skichic95
    Member

    **I take back the hidden part (site header) on the design.pinkheelspinktruck.com site. I hadn't gotten to hiding it over there. I did that part once I made my new site live on bossgirlcreative.com which is what caused some people to not see some of my graphic.

    Obviously it looks like I'm not going to be able to do this the way I want to do it, so I'll just mirror what I made happen over on the design site.

    June 27, 2015 at 4:37 pm #157705
    Erik D. Slater
    Member

    I wasn't talking about the "Site Header". I have never spoken about the "Site Header".

    The "Site Header" about which you speak - or Custom Header Image - is 320px x 120px.

    Let me just make this absolutely clear: I AM NOT SPEAKING ABOUT THE CUSTOM HEADER IMAGE 🙂

    And yes, I KNOW the custom header image is hidden on design.pinkheelspinktruck.com. That is why I have not made any reference to it ... and the only reason why I am talking about the banner image.

    Just to reiterate ... for the sake of clarity ... and to avoid any confusion, whatsoever ...

    I am only talking about the banner image aka the Daisy Area 🙂

    And again, just to confirm:

    Custom Header Image
    - 320px x 120px
    - currently hidden on design.pinkheelspinktruck.com
    - not part of this discussion

    Banner Image
    - 2000px x 200px by theme default
    - currently 1279px x 387px on design.pinkheelspinktruck.com
    - only topic of discussion

    With this in mind, please re-read my reply above ... very carefully.

    Are we clear now?

    June 27, 2015 at 4:43 pm #157706
    Erik D. Slater
    Member

    I take back the hidden part (site header) on the design.pinkheelspinktruck.com site. I hadn’t gotten to hiding it over there.

    Custom Header Image:
    - hidden on design.pinkheelspinktruck.com
    - visible on bossgirlcreative.com

    Banner Image:
    - visible on design.pinkheelspinktruck.com
    - hidden on bossgirlcreative.com

    Does this help clarify your confusion?

    June 27, 2015 at 5:47 pm #157707
    Erik D. Slater
    Member

    Just to add ... and referencing design.pinkheelspinktruck.com ...

    Getting rid of the white space above your banner image can be done by:
    - removing padding-top: 10px; from .title-area
    - removing padding: 40px 0; from .site-header .wrap

    As for your banner image, you really just need to make it wider or make it repeat ... then you won't get the chopped off effect.

    June 27, 2015 at 7:08 pm #157712
    skichic95
    Member

    Okay...removed the padding from the top but adjusted the top padding to 20px for the .site-header .wrap. I think this will just work. Thanks for all of your help.

  • Author
    Posts
Viewing 9 posts - 21 through 29 (of 29 total)
1 2
  • The topic ‘Beautiful Pro – Full Width Custom Background Image’ is closed to new replies.