I've created two versions of logo, a vertical and a horizontal one, the first for mobile screens, the second for desktop, to swap from one to another I need picture element. Unfortunately I've failed to implement it both in Dreamweaver, and Sublime text editor. The only thing I've noticed after hours of research, is that it only works with dummy images (placehold.it). Even more the problem seems to be the srcset attribute (which fails to display anything, no matter what is the browser), in contrast with the src attribute which seems to display the source image correctly.
Any kind of help would be most appreciated! (code follows)
<picture>
<source media="(min-width:600px)"
srcset="assets/desk/logo horiz.png"/>
<img src="assets/mob/logo vertical.png"/>
</picture>
This is best done with CSS and media queries. In your CSS, first set an image for the mobile version of your logo, then with a media query you override the first logo for different screen widths, like this example uses a different logo when the screen is 641px or wider:
.logo {
height: 50px;
width: 100px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
}
#media screen and (min-width: 641px) {
.logo {
height: 100px;
width: 200px;
background-image: url(images/logo2.png);
}
}
Related
I'm working on recreating my website and I would like to have images that appear on the size that categorize the sections. I would like these images to be responsive based on the height of the container. For example, if the container is 600px tall I want the image to be 600px tall regardless of the width. Right now I'm using background-size: contain; which works in desktop mode, but after a certain width, the image starts to get shorter in favor of staying the width of the container.
It works fine in desktop mode:
In mobile I get this:
When I want this:
I hope that makes sense. Also bear in mind that this isn't a finished concept so it looks pretty bad as it is even when I "hack" it to work in mobile
You can use media-queries:
#media only screen and (max-width: 600px) {
img {
background-size:cover;
}
}
You can read more about media- queries:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
You can read more about background-size:https://www.w3schools.com/cssref/css3_pr_background-size.asp
One important thing when asking for help is doing your best to explain your problem as best as you can. Things like putting part of the code you have for example could really improve how fast you'd be answered and have your problem solved.
With that said, I'd recommend changing your css to something like the following:
.hero {
width: 100vw;
height: 100vh;
background-image: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
}
The background-size: cover along with background-position: center will make sure that it displays in the way you want in mobile. Not necessarily exactly that part of the image though, maybe you'll have to work on an image editor.
The width: 100vw and height: 100vh that I used in this example, are the size of the container in which the image is the background, that is also relevant when it comes to how the picture is displayed. vw is viewport width, vh is viewport height. This unit is good for working with responsive displays, as it takes in consideration the screen to determine the size of whatever styling you put it in.
Since this is already working in desktop in the way you want, I'd suggest using a media query so you'd only change the way it's displayed in mobile, for example.
It would be something like
#media only screen and (max-width: 480px) {
.hero {
width: 100vw;
height: 100vh;
background-image: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
}
}
As suggested in another answer, take a look into media queries to choose which one is appropriate for what you're trying to achieve. You can use many media queries, such as one for mobile, one for tablets and one for desktop.
I've been working on my portfolio site (check it out at www.imkev.in) and I'm having some trouble with the mobile version. I've got media queries in my CSS that should switch to a lower filesize and differently cropped image at any screen width below 530pxs. There are other elements of the page (My multi column layout switching to a single column layout) that should similarly switch to a different page layout at lower screen widths and they do, so I know my basic media query is working.
However, the background images elements do not. They stay on the larger file and don't scale the image down to fit the browser window. Again, I'm only have this problem on actual mobile devices.
When I reduce the browser window size on my desktop to below 530px it will switch over to the alternate images and the mobile device emulators I've been able to find online (Chrome developer tools and other browser based ones) all seem to work like they're supposed to.
Here's the CSS I'm using:
.portfolio-background {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: cover;
#media (min-width: 530px) {
.portfolio-background {
background: url(/assets/images/background1.jpg) fixed;
background-size: 100% 100%;
}
}
I've also tried tweaking the background-size to be "cover" on the smaller media query with the same result. I also have this at the top of my html file which should set the width of the browser window to be the width of the device being used:
<meta name="viewport" content="width=device-width, initial-scale=1">
Any suggestions?
EDIT: I'm using a complier and I originally gave the code before my compiler did it's magic. I've adjusted the post to show the actual code output. Still trying to solve the problem
The background images are swapping correctly on your site, I think the issue is that are you not seeing the result you want because of the size and format of your mobile background, and your CSS rules.
The code on your site is slightly differt than what you posted, so I'll use that as an example.
First, try something like this for your mobile background:
body {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: 100% auto;
background-repeat: no-repeat;
}
I think you'll find that it's close to what you're after, but that it doesn't extend low enough at some viewports. The solution to this second point is to prepare another background image which is taller.
Update
It seems like there has to be a better way to cover all the potential
screen sizes than having a different background image for all of them.
How do you get a responsive background image for mobile?
Background on mobile can be tricky because the format of the elements can change radically from their format on desktop.
try preparing your mobile backround image so that its proportions are similar to the proportions on the element you want to cover on mobile
sometimes you can us a background color in addition to your background image.
if you can live with some of your background image not showing, then the use of background-position can help a lot. eg, if the center of interest is in the middle of your image, then css like the following will center your background image in the middle on your element
element {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: initial;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Good luck!
Consider the following link: https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
You are using the wrong media query. Instead change min to max. What this means then is that the maximum width is the one specified. So every decide whose width is less than or equal to 530px will use the styles you have specified.
This has to be:
.portfolio-background {
background: url(/assets/images/background1-small.jpg) fixed;
background-size: cover;
}
#media (min-width: 530px) {
.portfolio-background {
background: url(/assets/images/background1.jpg) fixed;
background-size: 100% 100%;
}
}
i.e. first the regular rules, then the media query, inside that the same selectors with the rules containing those parameters which differ from the regular rules.
background-size: cover;
Should be:
background-size: 100% 100%;
I have a site with an image at the top of the page. The site is fully responsive.
For the desktop view, I have a specific image I load for the header on the site. For the mobile view, I have a different image.
In the CSS, I use something like:
.headerimage { background:url(/images/header-desktop.png) no-repeat top left; }
#media only screen and (max-width: 480px) {
.headerimage { background:url(/images/header-mobile.png) no-repeat top left; }
}
And in the HTML it's just <div class='headerimage'></div>
My question is: how can I add ALT text (like I would to an IMG) tag so my site is fully accessible for screen readers, I get the SEO benefits of alt text, etc.? Obviously I can switch to using an IMG tag but that would require some serious hacks to keep it responsive once I have two IMG tags to deal with.
HTML 5 introduces the picture element which allows you to specify a series of images with media queries.
<picture>
<source srcset="/images/header-mobile.png" media="only screen and (max-width: 480px)">
<img src="/images/header-desktop.png" alt="Foo">
</picture>
You can't without resorting to Javascript AFAIK.
Using only CSS, your best option to have some description of the background image in your code is to use the title attribute in the DIV tag.
See here :
CSS background image alt attribute
CSS or Javascript - display fallback text if background image not loaded
Add a broken image, a hack.
Pseudo elements work for broken images. Read here
Use the pseudo elements to show other images on breakpoints.
img::before {
content: "";
background-image: url('http://lorempizza.com/200/200');
width: 200px;
height: 200px;
display: block;
position: absolute;
}
#media (max-width: 400px) {
img::before {
background-image: url('http://placehold.it/200X200')
}
}
Fiddle
I have a section on my website that uses a CSS background image. The website is here. You can see where I have the fixed background image in the "Contact" section. Here is the current CSS for the image:
#hs-contact-section {
color: #FFF;
background-image: url(../images/Chapel-interior.jpg);
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
Interestingly, if I use a browser inspection tool to simulate a mobile-sized window, the image is zoomed correctly.
But, if I access the webpage on an actual mobile device, it looks like this:
Is there something wrong with my CSS? I've tried searching online but haven't found any solutions that have worked.
It is more than likely because you are using a parallax effect which "does not always work on mobile devices."
refer to the note on w3schools
http://www.w3schools.com/howto/howto_css_parallax.asp
edit: if you want to swap our the image or disable the effect you can create a rule in your CSS
//768px is generally the max mobile pixel width
#media screen and (max-width: 768px) {
#yourId {
element: attribute;
}
}
I've been researching how to use media queries properly, below is the site I'm trying to make responsive. However, I'm finding trouble adjusting the image of my picture, I test the responsiveness on my PC, which is 17 inches and also on my Galaxy 5.
**edit, the problem is solved for me
.background-image {
position: fixed;
z-index: 1;
background:url(nycgold.jpg) fixed;
background-size: cover;
background-position: center;
padding-top: 13%;
padding-bottom: 100%;
font-family: 'Montserrat', sans-serif;
}
#media only screen and (max-width: 320px) {
/* styles for narrow screens */
.background-image{
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 1800px) {
/* styles for MacBook Pro-sized screens and larger */
.background-image{
width: 100%;
height: auto;
}
}
Any help is appreciated.
First, you've got 3 styles here:
The default style
The style for max-width:320px
The style for max-width:1800px
But all three styles set the background image to the same size. Backgrounds are not really something that you need to write responsive code for because they generally try to fit the browser's rendering area, but background-size:cover set once in the main style would ask the browser to fill the background with the entire image, so setting widths isn't necessary.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size for more information about the background-size CSS property.
To test out your media queries, make sure that there are DIFFERENT values set for elements in them and use something that is better suited to responsive, like an image in the foreground. <img src=""> or text size of an element.
If what you want is for the background to show once, with no repetition, add this background-repeat: no-repeat;
Other than that, your image should fit the whole width of whatever size the MQ is.