/    Sign up×
Community /Pin to ProfileBookmark

Header img not fitting. its huge.

Copy linkTweet thisAlerts:
Sep 17.2018

Hey all,

I created an image in photoshop and resized it 1000px widthby 1500px height. I then added the following CSS hoping it would fit on page fitting 100vh so the user can see the entire image when page loads.

#header {
background: url(“../img/header.jpg”) no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}

on small screens it looks perfect i can see the entire image it resizes, however on full screen it cuts off most of the image =/ no idea how to fix this. Please any advice appreciated.[upl-image-preview

small screens ok
url=https://www.webdeveloper.com/forum/assets/files/2018-09-17/1537226276-635724-small-screens.jpeg]

large screens it just looks awful BART >< i wanted to show the entire img
[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2018-09-17/1537226347-947508-large-screens.jpeg]

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@rootSep 17.2018 — Theirs viewport size, dpi size and physical file size

All can be too large

Resize to 1000px, fine...

What DPI ? 76 is more than enough. Remember that DPI is not compression percentage.

File type will also depend on how small or large the image is.

Copy linkTweet thisAlerts:
@thebronxsystemauthorSep 18.2018 — Hey root im not sure what dpi it used. I tried "file > export > save for the web" which is meant to make it 72dpi.

I reuploaded the img and its the same. On small screen i can see it but on large screen it cuts off the image.

EDIT: I think its aspect ratio problem. background-size: cover just makes sure the full width of image is shown and height just expands. background-size: contain would fit the image but leave white space on the right. now i not sure what to do
Copy linkTweet thisAlerts:
@thebronxsystemauthorSep 18.2018 — all i can think to do is this

#header {

background: url("../img/header.gif") no-repeat;

background-size: cover;

min-height: 100vh;

background-position-y: 75%;

}

then add media queries to keep fitting in part of the poster that makes sense which i guess is kinda ok

in future what resolution do you guys use in photoshop to create 100vh headers?
Copy linkTweet thisAlerts:
@rootSep 18.2018 — > @thebronxsystem#1595944 save for the web

is a meaningless term.

Unless you have a say in the DPI, then you can't assume that it will be, most lossless images I come across are 160 dpi, and that to some is web ready, it isn't, not by a long shot.

Grab yourself a copy of irfranview and the image will be compressible to a really tiny size.

What you have to do is trade off the physical size, the DPI that defines the ultimate size before the image degrades.
Copy linkTweet thisAlerts:
@SempervivumSep 18.2018 — I recommend to create two different images, one for screens in portrait format and the other for landscape.
Copy linkTweet thisAlerts:
@anjanakumari888135Sep 18.2018 — Good Forum! You can share accounting outsourcing related problems to experts when you communicate with the professional’s team. At any time, you can get quality services from them via Bookkeeping toll-free number +38-0443-577-6 47/ +38-0967-478-575. For more services, you can click on the link: -https://accounting-outsourcing.com.ua/accounting-services-in-ukraine
Copy linkTweet thisAlerts:
@rootSep 18.2018 — [[2,3,8,11],[2,8]]
Copy linkTweet thisAlerts:
@thebronxsystemauthorSep 18.2018 — Thanks all awesome forum
×

Success!

Help @thebronxsystem spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...