Sridhar Katakam

Genesis and WordPress Tutorials

How to use a full-width background image in Home Top widget area of Enterprise Pro

by 20 Comments

In Enterprise Pro, a ‘Genesis – Featured Page’ widget is meant to be used in the ‘Home – Top’ widget area to get the look like in the demo site. In the widget’s settings you would select ‘home-top (750×600)’ image size and left for alignment.

In this article I show how we can use an image as a background for the ‘Home – Top’ widget area instead of embedding the image.

enterprise-pro-home-top-background

At Appearance > Widgets, do not set Featured image to be displayed in ‘Genesis – Featured Page’ widget.

Add the following in child theme’s style.css:

.home-top {
background: url("images/picjumbo.com_IMG_6424-1600.jpg") no-repeat;
border-top: 1px solid #333;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.home-top .wrap {
padding-top: 90px;
padding-bottom: 90px;
}
.home-top .widget {
max-width: 400px;
float: right;
background: rgba(255, 255, 255, 0.8);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding-bottom: 40px;
}
.home-top .widget p {
color: #000;
}
@media only screen and (max-width: 1023px) {
.home-top .widget {
padding-bottom: 0;
}
}
@media only screen and (max-width: 768px) {
.home-top .widget {
max-width: none;
}
}
@media only screen and (max-width: 320px) {
.home-top .wrap {
padding-top: 30px;
padding-bottom: 30px;
}
}
view raw style.css hosted with ❤ by GitHub

Replace picjumbo.com_IMG_6424-1600.jpg with the name of your desired ‘Home – Top’ section’s background image (upload it to child theme’s images directory). You might want to ensure that this image is at least 1600px wide. Height depends really on how tall you want the image to be.

  • This is a subtle and simple, yet effective enhancement of Enterprise Pro. (Also nothing says ‘call-to-action’ like baked goods 🙂 ). If you retain the featured image (align none), you can overlay the background image with it. Add some CSS to adjust the image width (.home .featured-content img {width: 400px;}) and you can use this for something like a supplemental logo. Screen Image

    Reply

  • I think that this is exactly what I need to meet the designers layout, but when implemented, it stacked all the home bottom widgets, rather than leaving them aligned horizontally.

    http://cscarb.lizschneider.net/

    Does the photo still need to be the featured image size of 750×400?

    Reply

  • Sridhar,
    I posed this question around the time of your move. The home bottom widgets are now aligned horizontally, but the information that should be laid over the large background image is showing up below it. Do you know what I need to change here?

    Liz

    testing site: http://cscarb.lizschneider.net/

    Reply

      • I will revisit the CSS, when you were not active on your site, I tried a few things myself, so it may not be cleanly the code that you supplied.

        Reply

      • I’ve got the code in there properly now. and it looks good. Two adjustments on tweaking needed:

        How do I get the content of the Featured page to align at left? (most important on desktop and larger screen because that area has been left blank on the image on purpose.
        How do I get the image to resize for smaller screens, or at least to use the right-side part of image (the face of the client), rather than the left area.

        Reply

  • The issue is that the image is filling width but is being cropped in
    height, I just need this image to resize responsively. The way it works
    now with your code is that it seems to have a limited height and as screen
    sizes get smaller, more of the height shows. When I use the image as
    featured image and then insert Genesis Responsive Slider into the widget,
    it resizes but then of course is not full width. In your example, you
    don’t really mention the width that the image should be, I used an image
    that is 1140px x485px. Not even including any page content because I don’t
    want it to ever cover over her face.

    What am I doing wrong with your code here? http://cscarb.lizschneider.net/

    Reply

  • Hi Sridar,
    This worked perfectly for me, but my client wants to be able to change the image at some point and she is not going to be uploading images to the theme’s image folder and modifying CSS (e.g. changing the image name to whatever new image she wants to replace the current one I set). Basically, she wants to be able to do it all through the widgets panel. In addition, she does not want the ellipses to show when content character limit is set. Can you help me with either one of these issues? Thank you very much in advance!
    Jennifer

    Reply

  • This is a great tutorial! Makes the theme look so much better.

    Would it be possible to move the text overlay in Home-top to be centered along the bottom of that big background image? I don’t want it to cover so much of the picture as it does now. I’ve played around with it, and got it to center, but I can’t get it to move down without adversely affecting the background image.

    Thanks!

    Reply

  • awesome post and thanks for your help. pasted css code into style sheet. nothing shows up on home page. are there anymore settings i need to do or do i need to edit the widget in the widget area

    Reply

  • Hello, it perfectly works in mobile only. In Desktop version the white square disappear and text is not right-aligned 🙁

    Reply
    • >