Displaying Full Width Background Image

This topic has 14 replies, 2 voices, and was last updated 10 years, 1 month ago by Wes.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
March 6, 2014 at 2:59 pm #11170
bwboykin
Customer
Hello,

I am wanting to insert a full width background image in .slider-wide. I may very well be missing something but have the following in my CSS as it pertains to this:

.slider-wide {
background-image: url(“path-to-image-here.jpg”); no-repeat;
height: 500px;
}

I have used the height declaration and not used it and still the image does not show.

The end goal of this is to utilize some parallax effects here but for now getting the image to display is problematic.

Note: Just to make sure the image path was correct I copied and pasted into address bar to make sure that was correct and all was good there.

Thank you
March 6, 2014 at 3:04 pm #11171
Wes
Moderator
It looks like you have an extra ; symbol after the url
March 6, 2014 at 3:24 pm #11172
bwboykin
Customer
Pardon me Wes – my bad

I just checked the actual CSS and is as follows:

.slider-wide {
background: url(“path-to-image-here.jpg”);
height: 500px;
}

Still not showing.
March 6, 2014 at 3:42 pm #11173
bwboykin
Customer
Wes,

I noticed when I add a text widget in ‘Slider Wide’ with content that the image appears.

Is there a way to add a background image via CSS minus any content on top, such as adding a widget in ‘Slider Wide” and still have the image show?

Thank you
March 6, 2014 at 4:43 pm #11176
Wes
Moderator
Yes you can. Do you have a link so I can see what’s going on? Once I take a closer look I can figure out exactly what’s going on.
March 6, 2014 at 5:12 pm #11178
bwboykin
Customer
Thank you for the reply Wes. You will see a couple of lines of dummy content that I added via a text widget.

http://www.diligentiagroup.com/v2/
March 7, 2014 at 6:19 am #11183
Wes
Moderator
Are you saying the image doesn’t show if you don’t add text? Is that what you’re trying to do? If so, you could add an empty text widget and some padding to the widget. The text widget will be there so the widget will show up since the widget activates that area to be displayed. Adding padding to the widget area will show more of the widget. Add just enough padding to the top and bottom of the .wrap (inside the widget) and more of the image will be displayed. Let me know if that makes sense, and if you have any questions.

Your design looks awesome BTW! Be sure to let me know when you’re done with it. I would love to add that to the showcase list – https://appfinite.com/showcase-your-site/
March 11, 2014 at 12:43 am #11212
bwboykin
Customer
Thank you Wes for the kinds words. Much appreciated!

Couple of things:

1 – Any clue as to why images on single post pages do not show? They show on archive pages.

2 – The main image on the front page (man w/ umbrella) – if I remove background-size: cover – that is the exact size I need it to be where that individual shows right beside the text and not way off to the side. The issue with that is when that is done (cover is removed) there is larger sized gap underneath the image which I’m not understanding what the cause of that is.

Thanks in advance Wes and yes, when all is said and done I will pass on the link to you.

Much obliged!
March 12, 2014 at 12:01 pm #11248
Wes
Moderator
The link appears to be in maintenance mode. Just let me know when it’s live again.
March 12, 2014 at 12:34 pm #11250
bwboykin
Customer
It’s been deactivated. My bad!

Thanks
March 12, 2014 at 8:27 pm #11264
Wes
Moderator
“1 – Any clue as to why images on single post pages do not show? They show on archive pages”

Are you referring to Featured Images? if so, those only show on the blog page that shows all of your posts, as well as archives, but Genesis doesn’t show them by default. I think there is a way to enable it to show up somewhere on your single posts page, but I can’t find the link/tutorial on how to do that….but I’m sure it’s possible. Other than that, any images that you add inside the Content area will show up on the Single Posts pages.

If you’re referring to something different just let me know.
March 12, 2014 at 10:56 pm #11266
bwboykin
Customer
Here is that tutorial Wes

http://wpsites.net/web-design/display-featured-image-before-or-after-entry-title-on-single-posts-pages/

So far so good but it looks like it is only showing the thumbnail (150×150) rather than the full sized image.

If you’ve got any ideas as to a fix I’d appreciate it.

Thanks
March 13, 2014 at 10:18 am #11273
Wes
Moderator
Are all of your images set to show 150 x 150 in your Genesis Theme Settings? If so, then that could be what it is.
March 19, 2014 at 12:09 am #11373
bwboykin
Customer
Hey Wes – sorry ’bout that. Yes, 150 x 150 was set in Genesis Theme Settings. It seems those dimensions carry over to the single post pages as well.

Here is an example where you can see that 150 x 150 image showing:

http://www.diligentiagroup.com/v2/legal-investigation/how-to-spot-a-fraud-tips-from-a-pi/

Here is the code used to display what I’ve got now. Just not sure how to get it to display something other than the 150 x 150 image:
```
add_action( 'genesis_entry_header', 'single_post_featured_image', 15 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}
```
Thanks again Wes
March 19, 2014 at 8:04 pm #11384
Wes
Moderator
You should be able to select a different size in the Genesis Theme settings right? If you want more options you can manually create them in the functions file with the other sizes that are added. This of course will only apply to the featured images.
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.