image takes up whole widget

Just checked that out, and it’s not quite what I had in mind. My fault, though. I probably shouldn’t have referred to what I’m aiming for as a background image.

I’m just thinking of an image that takes up a whole homepage widget area, as in the http://www.usaviationacademy.com website. I’m not sure how to explain it other than to indicate how those widgets look on that website, and to say that rather than it be a background image that these widgets scroll over, the image would be fixed within the borders of the widget, and whenever you see the widget on the screen, you’re always seeing the entire photo.

I’m sorry if that’s unclear. If I need to explain that better, just let me know. Thanks for your help.

Hey Eric,

Thanks for weighing in. You’re right, I am able to use the customizer to create a background image that fills the entire widget. I would like the image to take up the whole widget area, but as a fixed image and not a background.

What I mean is this: rather than have the image be a background that the widget can scroll past and act as a “window” on the image (see different parts of the image as you scroll up and down), I’d like to have the entire image fill the widget, and that the entire image is always visible within the borders of that widget (without any padding around the borders of the image).

Do you know if its possible to do that? Thanks again for your help. http://www.new.cirrusaviation.com

Yep, I think we’re on the right track! And sorry for the mix-up…the link to the site works just fine, it’s my brain that’s the issue. I gave you the wrong extension on the URL. It actually should be http://www.new.cirrusaviation.us (not .com)

Would you be able to tell where I add that CSS? I also have custom CSS for quick edits as well. Thanks for your help on this, Eric. Very much appreciated.

Hey Eric,

Actually, what I’m trying to do with that bottom image of the airplane is have the entire thing always visible within the boundaries of that widget. What the widget does right now is act as a window on an image that is actually larger than the widget boundaries, so you see the top of the plane as you scroll up, and the bottom of the plane as you scroll down.

What really want is to have the entire airplane visible within the widget boundaries, so the whole picture of the airplane is always visible as long as that widget is visible. It would in effect be like any other image on a web page, as it is in a fixed spot on that page and it goes up and down as you scroll up or down. It would just fit exactly into the wide homepage widget with no padding around it. I’m probably not doing a great job of explaining this, but do you see what I mean? Thanks for your patience. http://www.new.cirrusaviation.us

Thanks for tracking with me on this! I’ve looked at it, and I think my best shot is to place the image in the Welcome Wide widget via html in the text box (it’s there now- http://www.new.cirrusaviation.us)

Now the only issue i have to solve is how to remove the padding around the widget so that all you see is the image without any gray around it. Here’s the CSS currently:
}

.welcome-wide .wrap {
margin: 0 auto;
overflow: hidden;
padding: 120px 0 60px;
width: 1140px;
}

.welcome-wide .widget {
margin: 0 0 60px;
overflow: hidden;
}

There’s three sets of values for padding on both welcome wide wrap and welcome wide widget. What’s the difference between the widget and wrap code sets (what does each do?) and can I remove the padding just by changing these values to zero?

Thanks again…