Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 23, 2014 at 4:12 am #356080
    browntodde

    I have been struggling to figure out how to make an image that is 1212×175 in size, fill the top header area. I am assuming I do this via the ‘custom background image’ but when I do, the image is only filling a very small area of the header space.

    I’m pretty new to this and don’t know much about css so its possible there is some code in there that might be interfering.

    Thanks

    November 23, 2014 at 2:19 pm #356212
    Ismael

    Hi browntodde!

    Thank you for using Enfold.

    After you upload the background image, make sure that you select the Full size version of the thumbnail.

    Cheers!
    Ismael

    November 23, 2014 at 6:31 pm #356300
    browntodde

    That did it, thanks so much for the speedy reply!!

    November 23, 2014 at 6:51 pm #356311
    browntodde

    Followup question for you – I’m not seeing the header on a smart phone browser, is there an option for this?

    Thanks!

    November 24, 2014 at 2:03 pm #356761
    Yigit

    Hi!

    Please add following code to Quick CSS as well 

    @media only screen and (max-width: 767px) {
.responsive #header_main .container { height: 175px!important; }}

    Cheers!
    Yigit

    November 24, 2014 at 6:15 pm #357003
    browntodde

    Thanks Yigit, that definitely helped by bringing in the section of the header to the far right (underneath the shopping cart icon) with the phone in portrait mode. When rotating the phone to landscape, I see a bit more of the center section of the header but my logo (which is built in to the header and placed in the center) is cut off.

    Please let me know if there is a way to fix this. I realize that a phones browser doesn’t have as much area to work with so something probably has to be compromised but just I wanted to make sure there isn’t an easy solution to see the whole logo.

    In general, is adding code to the css the only way to do certain things like this? I see you kindly providing custom code for a lot of people and am wondering if this is the only way to modify things or if it’s just quicker? I for one, hate to bother you guys every time I can’t figure something out so wondering if I need to learn css?

    Thank you!

    November 25, 2014 at 7:07 am #357374
    Ismael

    Hi!

    We provide basic css, php, html customization for users who ask for it. Yes, you need to learn css if you’re trying to achieve something that is out of the box. Premium themes, at least not that I know of, can’t possibly add all features on the theme options. It’s not required but a little knowledge on css, html or php won’t hurt. Please replace the code above:

    @media only screen and (max-width: 767px) {
.header_color .header_bg {
background: #ffffff url(//toddbrownmagic.com/wp-content/uploads/2014/11/TBMC-Header1.png) top right repeat fixed;
background-position: top center;
background-size: 100%;
background-repeat: no-repeat;
}

.responsive #header_main .container {
height: 60px !important;
}
}

    Cheers!
    Ismael

    November 25, 2014 at 8:53 am #357406
    browntodde

    Wow, I’m supposed to be the magician but the way you guys make this code do the things you do is pretty amazing!! Thanks for the help, you guys are great!

    Any good resources you can recommend for learning css?

    November 25, 2014 at 5:15 pm #357676
    Yigit

    Hey!

    You are welcome, glad we could help :)
    Please take a look at these website – http://www.w3schools.com/css/ – http://www.codecademy.com/en/tracks/web – http://www.cssbasics.com/

    Regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Fill header area with image’ is closed to new replies.