CODEWITHSUNDEEP
htmlcssimagebackgroundposition
Top Manga
Top Manga

Reputation: 1

Align/position header image background correctly

I am currently working on a site and have a problem with aligning/positioning the background image in the main header area.

I want the image to be fully seen there. And I want it also to work when I scale down to mobile versions of the site.

Here is a screenshot of the problem, the image is just centred (I also have used larger images):

Header Image

Below is my CSS code:

.header-six .header-t {
    padding: 30px 0;
    text-align: center;
    background-image: url("/image.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Upvotes: 0

Views: 58

Answers (2)

Perropolesia
Perropolesia

Reputation: 173

Have you tried with background-size: cover?

On w3schools is defined as:

"Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges"

Recommended to take a look at the description page of background-size to understand better how to use it properly: https://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 1

Adarsh
Adarsh

Reputation: 448

.header-six .header-t {    
width: 100%;}

This might help.

Upvotes: 0

Related Questions