Enlarge Header Image

Dazzling
#1

Hello
I am looking to replace current header image (static welcome page)
with an image size 729 px wide by 424 px high.

Please provide the Css code to achieve this.
Enclosed is the link to the welcome page where I will be placing the image
https://wp.me/P4uzSK-l

Thank you in advance

#2

Hi there,
Thanks for reaching out.
In reference to your question here, could you try out the following CSS code in order to enlarge the container size.

#logo img {
width: 729px;
height: 424px;
}

I hope this helps.
Best Regards,
Support.

#3

Dazzling Theme

Hi Again
I put the CSS code you provided and I was able to achieve a larger front page header image.

However, the image is blurry. The image is not blurry if I put it in a post.
So the blurry image issue is specific to the header area.

Do you have a CSS code to allow my header image to be focused?
I left the blurry image on the page for your review.

Thanks much.

#4

Hi Grey

First of all, this is a logo, normally logo size has its own sizes and it can not be as big as you have right now on the website, otherwise, this is not the logo.
why is this theme is changed in this weird way? everything is so strange here, is this normally for you :slight_smile:

#5

Hi Again

My previous header image in Dazzling theme was also large 688 w x 480 h.
This image came up clear on laptop, tablet and cell phone.

On my laptop, tablet my page layout (copy and such is fine) only issue is blurry image.

Is it possible there is a difference in CSS code for logo image and header image?
My specific design objective is to have this image above the navigation menu.

Thanks Again

#6

Hello there,

The logo image would have to be resized to a smaller size so you need to ensure you use a large enough image to ensure it does not lose quality when it is resized.

Best Regards,
Support

#7

Hi again.
Thank you for your guidance about Dazzling theme.
I removed the large header image and replaced it with a logo.

Please provide the CSS code to create a little space between the logo and the navigation (menu) bar.

Please provide the CSS code to replace the dark green default color on the navigation/menu. The color I will use is #dae9f2

My other colors on the navigation bar are ok.

Thanks much your guidance has been so very helpful.

#8

HI

This is way beter now :slight_smile:

here is your css codes:

#logo {
text-align: center;
margin-bottom: 23px;
}

.btn-default, .label-default, .flex-caption h2, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a {
background-color: #dae9f2;
border-color: #dae9f2;
}

#9

Hi again.
Thank you providing the CCs code to change the default color on the menu/navigation bar and the code to provide space below the header image.
The modifications when thru perfect on the laptop, tablet and Android mobile.

The Dazzling theme works well for my business to business website; content has priority over design.
I am not a web designer or developer and your prompt replies and guidance has been greatly appreciated.

#10

Hello there,

I am glad the solutions worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support