I'm setting up a new Wordpress site and am stuck on how to position my logo (header image)/background image. The photo below is how I want it to look & how it currently appears on a desktop. However, it gets cut off on mobile and I think it has to do with how I set it up...
My header image is actually transparent and what you see is the background image. So my question is, is there a way that I can position it properly on mobile devices too? Or, is there a better way to do this?
The reason I chose to set it as the background image rather than a header image is that I wasn't sure how I could get it to actually touch the top of the page if set as the header image.
If you want to see my actual website, it's here. I'm using the Brunch Pro theme.
Any help or ideas would be very much appreciated! :)
Add this css to active theme style.css file.
#media (max-width: 767px){
body.custom-background {
background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
background-position: 50% top;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 70% auto;
}
}
Related
I uploaded a custom image to my WordPress site to use as a header background. I have it displayed using the following CSS:
.main-header-bar {background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;}
This allows the image to stretch the width of the screen even when the screen size changes.
The challenge I need help with is getting the height to adjust along with the width.
I think the issue is the height of the header area is defined by the font size chosen for the site title, the tagline, and the menus. To illustrate, when I move the browser window from a medium sized screen to a large one, my image size increases to match the size of the new monitor, but the font of the title, tagline, and menus remains the same. Because the height is now insufficient to contain the image now that it is wider and taller, it cuts off the bottom of the image.
Is there an elegant way to address this?
For reference, I am using the Astra theme.
Thanks!
UPDATE: I've done some more experimenting. I've discovered that the image is not actually "cut off" per se. The whole thing is there. However, on the larger screen, at the normal 100% zoom, the content of the page is displayed overlapping the image. If I zoom in, the image remains at 100% the width of the page while the title, tagline, menus, and content enlarge. The title expanding pushes the content down and the entire image becomes visible.
What I'd like is for the title and the header to be in sync with one another. Right now the image size is set relative to the screen size (100%), while the text size is set by a font. Is there a way to tie these to things together so there is a consistent appearance?
UPDATE:
I think I figured it out, mostly. I'm sure I'm doing something sloppily because I don't quite understand it all. By calculating a font size and using "vw" it makes the font size adjust based on the width of the screen instead of pixels. Since my header image also does that, it lines up (not perfectly, but it works between the screens I'm testing on well enough). Here is the code I added:
html { font-size: calc(0.75em + 0.5vw) }
.site-title {
font-size: calc(7.1vw)}
.site-description {font-size: calc(1.6vw) !important;}
.menu-item {
font-size: calc(1.8vw);}
How about trying it with a media query to satisfy the larger viewport.
.main-header-bar {
background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;
}
#media only screen and (min-width: 600px) {
.main-header-bar {
background-image: url("image url");
background-repeat: no-repeat;
background-size: cover;
}
}
Good afternoon,
I'm new to webdesign.
I've added a background-image to my webpage.
I used the below CSS to achieve this:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
height: 100%;
background-image: url(link.jpg);
}
It is fine on desktop and tablet devices. However on mobile phones, not everything is showing.
I have a specific image for mobile devices, but I don't want to use it, because there is too much quality loss of pixels.
I want to use the same image, but it is not scaling down correctly.
I already tried adding a media query for mobile, with adding background-size: contain. Then the image is scaling down in the widht, but not the whole background is coverd. So that doesn't help either.
What can I do to fix this?
Thank you.
That's normal behaviour when using a landscape image on a portrait screen. The only thing you can do is, what you already tried. Add some media-queries for different screen resolutions, which adjust you image the way you thing it looks the best.
One idea for your case:
If you add a header and a footer to your website, it should be possible to show the background image exactly like you wish.
if you are ok with stretching image then you can use,
background-size: 100% 100%;
The background image shows perfectly on PC and simulator (tablet and phone), but it won't show on actual phone/tablet.
code
div#photo_break {
#include viewport-unit(height, 28vw);
background-image: url('<img>');
background-repeat: no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
z-index: 99999;
}
website
As you can see in this picture, in Chromes simulatorthe picture is shown.
The size of the image is not really large, or is it?
Nice site. :D Let's try to solve your issue.
Make sure you do not have that CSS code inside any media query, since it might block that content.
You might also try to add a new media query with the same CSS you have just for mobile, like this #media (min-width: 481px) { }.
Clean your mobile browser's cache before loading the site again.
Your background image is 12,000 pixels wide. It takes a long time to load to, I would suggest making the background of a parent div black inside the header, then putting an image in of just the person as the background of the element within that container if that makes sense. Save your mobile users data!
mobileand tablet browsersdo not support background-attachment: fixed.
changing this, solved the problem
My image: http://path.com.my/v2/wp-content/uploads/2016/05/Home-Page-Banner-B.jpg
Website: http://path.com.my/v2/
Check 2nd slide
The slider image, no matter what resolution of images I put in, it will still 'zooming' in too much in the center and cut off too much details. Changing the the image aspect ratio doesn't seem to do any good either.
I have try to use background-size: cover, but it would leave blank spaces on the side, and doesn't do any good in different screen sizes too.
Any idea on how to best achieve this so I can put in my image with the least crop or zoom in?
Try the following:
.home #content .slide {
/*[...]*/
background-attachment: fixed;
background-size: 87%;
background-position: 250px 0;
}
I am using the Tesseract theme from tyler.com and I am using the visual editor to set a fill background image. The background image seems to look ok in desktop, but mobile seems to not be scalong properly. http://kingsmanarms.us is the website. Should I use a class and media queries to target different devices? I read something about -webkit. Please help
In that case you should media query, and your background attachment should be fixed, try this and in your mobile the background will be good to look :) since your div has set to static we should use '!important' for this.
#media all and (max-width: 480px) {
.panel-row-style {
background-size: inherit !important;
background-repeat: no-repeat;
background-attachment: fixed;
}
}