Community Forums › Forums › Archived Forums › Design Tips and Tricks › Beautiful Pro – Full Width Custom Background Image
Tagged: background, css
- This topic has 28 replies, 4 voices, and was last updated 9 years, 4 months ago by skichic95.
-
AuthorPosts
-
June 20, 2015 at 11:35 am #156936skichic95Member
I'm trying to make the Custom Background Image to go full width (the Boss Girl Creative Image seen here: http://design.pinkheelspinktruck.com)
I've inserted custom css to add in background-size:cover; and using Firebug, it's making the change, but when I add in that code, and hit update, it's not taking the change. And then when I check it again on Firebug, it's got an override somewhere because I see the background-size:cover; in strike through.
What else do I need to change to get it to accept that background-size:cover; ?
http://design.pinkheelspinktruck.comJune 21, 2015 at 11:20 am #157003ChristophMemberHi,
do you really want to set a background image or is it really a header image?
Iยดm not sure how you are inserting the image but if possible, add
/cover
after thecenter
value like so:.custom-background .site-header-banner { background: url(http://design.pinkheelspinktruck.com/wp-content/uploads/2015/06/Boss-Girl-Creative-Header-1.png) #ffffff no-repeat center/cover scroll; }
Otherwise the easiest short cut would be to insert !important after your code:
(This code is from a custom inline css block).custom-background .site-header-banner { height: 387px; background-size: cover !important; }
June 21, 2015 at 12:44 pm #157015skichic95MemberThe theme has a spot for a header image being like 300x100 (sits to the left, above the custom background image). I don't want to use the spot where the header is (you see that white space above the Boss Girl Creative area...that's the header space and the primary nav bar space). I'd like to hide that too if possible. What I've tried hasn't worked yet. Any thoughts?
I'm using the custom background image as my header. I tried your second code (adding the !important portion) and it worked! So thanks for that!
Also, is there a way to link it to the home page (the Boss Girl Creative image)?
June 21, 2015 at 1:00 pm #157018ChristophMemberI would suggest you take a look at this tutorial:
If you decide to use the custom background, you can use
.site-header { display: none; }
to remove all of the white space.
For creating a link to the home page have a look at this:
ran.ge/2012/04/03/css-trick-turning-a-background-image-into-a-clickable-link-take-2/
June 21, 2015 at 1:37 pm #157027skichic95MemberThank you so much for all of your help!!
June 21, 2015 at 1:49 pm #157031emasaiParticipantThe header is full width so you could use a background image. You would, however have to remove the text from the present image and place it within the header wrap in the title area, where it will be clickable as it should be.
You are confusing the banner area with the header area. The logo should be a clickable link with/without the site tagline in the header which links back to the home page. The banner is just an image that does not contain the site information but can contain a call to action or just beautify the page.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJune 23, 2015 at 12:54 pm #157321skichic95MemberOkay, I switched the positioning to make it in the header area. I updated the height/width in the functions.php file to the dimensions of my graphic, but it's still making it default to something. Any clue where I fix it?
June 23, 2015 at 2:18 pm #157334Erik D. SlaterMemberApologies for poking my nose into this one ๐
As the window width reduces responsively, two things can happen:
(1) the image stays the same; the height remains unchanged; but CSS removes the sides from view, e.g. what your site is currently doing
or
(2) the image width and height both reduce, but proportionally, e.g. this website here. It's not my site, but I did fix the header image issue here.If you play around with resizing your browser's window width, you'll see what I mean in both cases.
What you can't do - however - is have your complete image remain at full width AND maintain the same height as you view your site during responsive activity. That would make your image look all squeezed-like ๐
Erik D. Slater: Digital Platform Consultant โข LinkedInJune 23, 2015 at 2:47 pm #157339skichic95MemberNo worries about jumping in.
My theme has 2 areas...the standard placing for a header image (originally sized at like 300x120px I believe) and sits in the upper left-corner and then it has this custom background area...you can see the full demo here: http://my.studiopress.com/themes/beautiful/#demo-full
Where the text is in the header section: "Beautiful Pro" is where I have my current logo inserted, I just don't have the Primary Nav bar turned on, so it's centering it. I also already adjusted the dimensions of my photo in the functions.php file to reflect the actual size of the graphic itself. Although nothing happened when I made the adjustment.
The beauty background (the daisys) was where I had my header graphic previously, but I didn't want to have to figure out how to make it clickable and plus on different browsers, the top of the graphic kept getting cut off. And I was using the code Christoph had given me to hide the site header. On my end it was showing fine, but on a different computer and a different browser it wasn't working.
So I scrapped the idea of adding it in that beauty area. And I've got it blank now.
My goal is to make my image full width. That was why Christoph had given me the background-size: cover !important; code to make it do that (in the previous beauty space).
So now, I'd like to know how to make my header full width as seen on this website: http://www.lovebeingboss.com/
Any help in making that happen would be appreciated!
June 23, 2015 at 8:45 pm #157356Erik D. SlaterMemberThe first thing to understand here is that full width - in WordPress terms - doesn't always mean what people think. There are two types:
- full width of the screen
- full width of the themeFor many themes, the two are different. For Beautiful Pro though, they happen to be the same. And here is where I'm all confused ... because right now, you have something different to the theme default ... yet I think you want what the theme default provides ... which is probably one of the reasons why you chose the theme in the first place ๐
The solution to all of this depends on how you want things to work during responsive behaviour.
If you want the text part of your logo to stay the same throughout responsive activities - which is not like Love Being Boss - then using the default custom background method in your theme should work ... with minor CSS changes.
If you want things to behave like Love Being Boss, then you will need to separate the text part of your logo from the background part. If you created the image yourself, then that will be easy to achieve. If you outsourced the work, you should be in possession of the original, unflattened/non-exported version of the file you essentially paid for.
Two things can then happen ... still assuming that you want the Love Being Boss effect.
Firstly, you would set the custom background part (the steering wheel image) as per original Beautiful Pro theme standard ... then apply relevant CSS changes as required.
Secondly, you would modify the beautiful_site_header_banner() function in your functions.php file to add in the text part of your image (which is exactly how Love Being Boss handles things). The following code:
echo '<div class="site-header-banner"></div>';
would need to be changed to:
echo '<div class="site-header-banner"><img src="text part image URL" alt="" /></div>';
and then you should be done ... more or less.
All of the above - by the way - has nothing to do with the custom header image ... which is 320x120 by default.
Erik D. Slater: Digital Platform Consultant โข LinkedInJune 25, 2015 at 2:44 pm #157538skichic95MemberI think you just spoke greek to me. I'd like to be able to have a header that fits full width responsively to someone's device. I originally made that happen with that pretty daisy portion of the theme demo and I hid the site header. But it wasn't coming up right across different computers/browsers. It was being chopped off from the top.
I'd like to know what steps I need to take to achieve that. I understand the splitting the text from the background part, but truly you lost me after that.
June 25, 2015 at 3:41 pm #157542Erik D. SlaterMemberMy advice is to return your theme back to the original state ... and we start again. Because right now, the header image on your site is nowhere near what you want to have.
Erik D. Slater: Digital Platform Consultant โข LinkedInJune 26, 2015 at 3:00 pm #157615skichic95MemberOkay, it's back to normal, including changing the header back to 320x120. I've removed the image and I don't have an active image in that other portion either.
June 26, 2015 at 3:39 pm #157617Erik D. SlaterMemberAlrighty then ๐
Right now, your home page looks like this screenshot.
If you are you using a caching plugin like W3 Total Cache or WP Super Cache, you should clear it down.
Erik D. Slater: Digital Platform Consultant โข LinkedInJune 26, 2015 at 3:54 pm #157618skichic95MemberI don't have one on this site.
June 26, 2015 at 3:56 pm #157619skichic95MemberRight now, this is what I'm seeing on my site
June 26, 2015 at 9:50 pm #157638Erik D. SlaterMemberOK. First of all, thank you for providing your screenschot.
Secondly, based on your screenshot, when - exactly - did we switch over to http://www.bossgirlcreative.com/? That is the first time the URL has been mentioned, i.e. up until now, the only URL we have had to work with was http://design.pinkheelspinktruck.com/.
Thirdly, always keep in mind that we are here to provide you with the assistance you need. Eventually, your problem will be solved. But we are volunteers ... we don't work for StudioPress ... or Copyblogger Media ... and we are giving up our time to help you ... at no cost to you.
And also remember this: we actually want to help you here ๐ But the less information you provide to us, the harder it is for us to diagnose issues and provide solutions.
So ... before proceeding any further, which site should we be working with? My advice is to go with the site that is not your live site.
Erik D. Slater: Digital Platform Consultant โข LinkedInJune 27, 2015 at 11:11 am #157681skichic95MemberWhen I originally posted for help, Christoph was able to answer my questions. I had paid someone to design a site for me and although I requested it built on Genesis framework, it was not done that way. So when I wanted changes made, I had no clue where to make those changes. I decided to redo my entire website but design it offline (design.pinkheelspinktruck website). I got it working and looking the way I wanted it to and my kinks worked out. Or so I thought. I copied my style sheet and installed Genesis and the child theme and added in my style sheet to my actual website. All was good. I tipped Christoph for his help and closed my question. Until a friend told me the header was chopped off. That's when I reopened it and started asking for help again.
Apologies for not stating that I had already transferred everything over and was now working on my live site which is bossgirlcreative.comJune 27, 2015 at 12:20 pm #157687Erik D. SlaterMemberDid you read through the Beautiful Pro theme setup page on how to configure the site header banner image?
Erik D. Slater: Digital Platform Consultant โข LinkedInJune 27, 2015 at 2:26 pm #157693skichic95MemberYes
-
AuthorPosts
- The topic ‘Beautiful Pro – Full Width Custom Background Image’ is closed to new replies.