Background Image for Header – Craft Ideas Theme

Hi guys,

I am trying to use CSS to manually insert an banner image into the
background header area of the Craft Ideas theme.

I have attached the original Craft Theme image of the woman with the orange background to show what I mean

The header dimensions are 1326 x 276 which is what I designed my banner to be. However in the background
of the Craft Theme there is a div space either side of the logo which has a smaller dimension.

So in summary what I am trying to do is place my banner full-with across the header of the demo site.
I have tried CSS and I can accomplish this on the demo site but not on my site.

Images attached below.

https://drive.google.com/open?id=1M6F7z3x0WUXN5P6i840T0CRZtVmnMLW7

Thanks in Advance 🙂

• This topic was modified 8 years by Daltai.

Hi Simon,

I tried that method already and unfortunately it doesn’t display the image correctly.

The quality is terrible and completely rasterized. I’m aware how the demo is set up too but just want to reproduce the image banner that is attached in my 1st post above.

When I use the inspector tool and copy the url of my banner into the space the demo banner url uses, it works perfectly, therefore CSS must be the answer.

I’ll have to have another go of it now to see what I can do.

Thanks for your reply!

Shane

**ISSUE FIXED**

For anyone looking to achieve this, this is how I figured it out. I used chromes inspector tool and went through several different div elements. The one you think you need is not always the one that will produce what you are looking for, just keep trying the child elements until it starts playing ball.

The CSS I used to fix the job was:

.td-header-style-10 .td-logo-wrap-full {
background-image: url(“https://www.thechildhoodlife.com/wp-content/uploads/2018/05/Childhood-Life-Logo-Background-1326-x-276.jpg”) !important;
min-height: 276px !important;
}

Hope This helps someone else trying to customize the design of the Craft Theme for Newspaper.

Thanks

Shane

Hi Daltai, where did you place the css code and what size did you make your header image?

Thanks!

Hi Linda,

I made the size 2698 x 552 as per this link – https://www.thechildhoodlife.com/wp-content/uploads/2018/06/Childhood-Life-Logo-Background-2698-x-552.jpg

Be sure to set the image dimensions when you select it from the media library. If you don’t the resolution can give you unexpected results!

I placed the CSS code in the Theme Panel > CSS module NOT the Live CSS module. Hope that helps.

If you have any other questions fire away!

Shane