[webpagefreakParticipant]

Hi, I’m trying to get a background image to fit and no matter what size I make the image it either has the top image cropped or the image gets closer and more blurry for some reason when I make the image smaller. I have an img 1200×1897 that is the best resolution from all the images I’ve tried but it cuts off at the top. Can you please help me as I’ve spent far too long on this single image and have many to go…. I need a background image to fit, is there a specific px formula to follow for this? You will find my static front page without image as it looks to horrible to be posted live. I will provide my login credentials. I’ll show you the image I’m trying to fit as well, sigh sorry for rambling, thanks for the help.

http://www.snowyowltours.com

[webpagefreakParticipant]

This reply has been marked as private.

[RahulModerator]

Hey There,

We have a detailed discussion about the same topic. Can you please visit the following thread for more useful information regarding your query?

Check this thread :

https://community.theme.co/forums/topic/create-fullscreen-background-image-on-any-page/

If you have any further queries after following the thread, let us know. We’d be happy to assist you with everything!

Thanks!

[webpagefreakParticipant]

wow, that’s a lot of steps to get a fitted image in a page background….I don’t want to use a slider, I have a feeling there is a css that I can use on each page to “fit” a background image…. I planted an image on one of the pages, you can see the dog’s ear is cut off, I just want to fit the image….shrink it down to regular size, original size…

http://www.snowyowltours.com/ethical-breeding

I have included the original image I’m using, hope I’m explaining myself properly:)

[webpagefreakParticipant]

hi, had to reduce image size

[Nabeel AModerator]

Hi again,

You can disable the backstretch image and instead add a background image to your body:

.backstretch {
    display: none !important;
}
body {
    background-image: url('http://your-image-path.jpeg');
    background-size: cover;
}

Try uploading a high resolution image. Let us know how this goes!

[webpagefreakParticipant]

.backstretch {
display: none !important;
}
body {
background-image: url(‘C:\users\registered user\desktop\pages\iadl.jpg’);
background-size: cover;

Hi I tried entering the image path but nothing happened, what have a done wrong?

[webpagefreakParticipant]

I forgot the } in my last post but I assure you it’s in the css 😛

[JoaoModerator]

Hi There,

Are you developing this site on your computer or on the URL above?

you entered a path to your HD background-image: url(‘C:\users\registered user\desktop\pages\iadl.jpg’);

Upload your image and enter the correct url.

Let us know how it goes

Joao

[webpagefreakParticipant]

I’m developing the site on my computer, with an image from my computer…

[webpagefreakParticipant]

where it says URL do I add my website address?

[RahulModerator]

Hey There,

Please upload an image to the media library. Once the image is uploaded, kindly grab its URL from there and paste it to the given code.

Let us know how it goes!

Thanks!

[webpagefreakParticipant]

OMG, now I get it! So I used the css

.backstretch {
display: none !important;
}
body {
background-image: url(‘http://snowyowltours.com/wp-content/uploads/2016/07/it-s-a-dogs-life.jpg’);
background-size: cover;
}

the image appeared but more close up than ever, it’s like it zoomed in a thousand percent.

[webpagefreakParticipant]

it’s a high res pic

W:4272 px
H: 2848 px

[webpagefreakParticipant]

here’s a screenshot of the image very close up after applying the code

[Author]

Posts