- This topic is empty.
-
AuthorPosts
-
July 8, 2014 at 9:55 am #175002whitParticipant
I’m attempting to create a responsive banner of a shop front for a website
LinkHowever the image is either too squashed or too zoomed in. What should I do?
Edit To clarify i need the shop front to be visible on all screen sizes , this is the class i am currently using .
`.splash {
background: url(../img/headers/shopfront2.jpg) no-repeat center top;
margin-top: 0px;
padding-top: 60px;
text-align: center;
background-attachment: relative;
background-position: center center;
min-height: 480px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* background-size: cover; */
}`July 9, 2014 at 9:55 am #175061shaneismeParticipantIf you aren’t happy with how the image looks at certain resolutions, re-cut the original to more closely fit and create some breakpoints to change out the
background-image
on your element.For instance:
@media only screen and (max-width:40em) { .splash { background-image: url('../img/headers/shopfront-small.jpg'); } }
You could also do the same thing with the newer
picture
element syntax, and then use the Picturefill polyfill to support older browsers.July 9, 2014 at 10:01 am #175062whitParticipantIsnt that adaptive instead of responsive? , I may have solved my problem by using the built in bootstrap gallery with one item. With the solution you suggested the problem is that i dont know what resolution to make the picture to begin with , then do i set my min-height to its hight ? and switch the images at the break points?
July 9, 2014 at 1:26 pm #175090shaneismeParticipantWhat resolution to make the image depends on where it looks weird. It just takes a little trial and error.
Using
min-height
is just there as a safety net to make sure it doesn’t break on the edge cases. I wouldn’t rely on that as the key ingredient to switch during a break point.July 9, 2014 at 1:55 pm #175092whitParticipantIs there a solution that doesn’t involve multiple images? I think I fixed it with using the gallery this is just for best practice reference.
July 9, 2014 at 2:22 pm #175094shaneismeParticipantSure, if your image is large enough, you can just focus in on where you want to focus using
background-position
while adjusting the box size (eg.height
,width
, etc). You can “zoom in” or “zoom out” usingbackground-size
as well.Sometimes, though, it’s best to use multiple images – it just depends on the needs of your content :)
July 9, 2014 at 2:29 pm #175096whitParticipantUsually I don’t have a problem but it seemed no matter what the image was just too zoomed in and I wanted to be able to see the whole shop front, the single item carousel seems to have provided a semi decent solution.
July 9, 2014 at 3:42 pm #175099shaneismeParticipantGlad you got it working.
I guess the moral of my story is: there’s no right way to do it.
If it’s important content, make sure it’s viewed well by all. If it’s just pretty content, you can take liberties with it.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.