I am trying to make header responsive. Currently header is fixed and when you view it from different screen resoultions it is not lookin good.
#tie-wrapper #theme-header {
background-image: url(http://example.com/header-image.jpg);
background-repeat: no-repeat;
}
I wish to have same image on different resolutions. It should decrease with website. Also logo is centered so the image should be.
I really don't know how to add this image for different resolutions.
Thanks
You can use different images at different screen widths using css:
#media only screen and (max-width: 1023px) {
#tie-wrapper #theme-header {
background: url('http://example.com/header-image_FULLWIDTH.jpg') center center/cover no-repeat;
min-height: 500px;
width: 100%;
}
}
#media only screen and (max-width: 767px) {
#tie-wrapper #theme-header {
background: url('http://example.com/header-image_LARGE.jpg') center center/cover no-repeat;
min-height: 400px;
}
}
#media only screen and (max-width: 480px) {
#tie-wrapper #theme-header {
background: url('http://example.com/header-image_MEDIUM.jpg') center center/cover no-repeat;
min-height: 300px;
}
}
I will normally add this code into my template file and using wp_get_attachement(), load up different sizes of images. Or you can hard code it in your styles.css. Either way.
Related
First of all, I am unable to provide any URL details as I am developing on localhost - for now. However, hopefully, with my clear description below, you may be able to provide a suggestion. :-)
I've been trying to positioning an image in the .header-wrap #header of my Wordpress site using Uplift theme. The code below has worked correctly, but the image goes below the header due to the aspect ratio which means that its height is clearly more than 160px. I have also tried background sizing and background-position - none of these provide the correct outcome.
I am aware that I need to introduce media queries, but I need to first of all get this curved image working on large screens.
I'm needing the image to sit directly under the header logo and to be positioned in the site header template so that it is scalable for all devices but adopts the sticky header so the body scrolls underneath the image.
I've provided two screenshots: first screenshot using the below code, which currently falls below the header area, and the other screenshot displays what it should look like on all screens.
The below code would work if the image wasn't so customised to a particular shape.
So, I need the image to stay fixed, so when a user scrolls up or down, the content of the page should scroll under the image.
.header-wrap #header {
background-image: url(http://localhost/lps/wp-
content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
preferred layout
The image as it currently stands using code insert
Hi you need media queries to make responsive you image background may be you have to generate different size...
.header-wrap #header {
min-width:100%;
min-height:100%;
height:100%;
width:100%;
position:fixed;
top:0px;
background-image: url(http://localhost/lps/wp-content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
#media all and (max-width: 1080px) {
.header-wrap #header{ left:-600px;}
}
#media all and (max-width: 980px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 800px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 768px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 750px) {
.header-wrap #header{ left:-380px;}
}
#media all and (max-width: 640px) {
.header-wrap #header{ left:-280px;}
}
#media all and (max-width: 360px) {
.header-wrap #header{ left:-180px;}
}
#media all and (max-width: 320px) {
.header-wrap #header{ left:-160px;}
}
Now you need to adapt media queries position here for exemple but you have to adapt to the different device here a lot of them...
I have an background-image:url on my body in CSS. The problem is when I transition into mobile devices where the screen becomes portrait orientated. I have a different portrait orientated background I wish to use. Mainly, "portrait-orientated" in my case really just translates to mobile devices, not so much ipads/tablets. Mobiles are much more extreme with the difference between length and width so I want to link a different url in this case.
Idk if there's any way I could use Bootstrap's .hidden-xs/.visible-xs to accomplish this, that's just me thinking out loud, but if someone has a solution using this I'd be more than happy to hear it. This also would help since I'm using Bootstrap's navbar which changes into a touchscreen navbar when xs, meaning <768px, So I'd like to only change the background image when the navbar changes.
So any ideas? I'm a total newbie at this point, this is my first real project that isn't just isolated snippets. This might be something for Java but idk. I'd love any and all help.
Also a quick semi-related question, how do I handle background-position: center (-50px from the top). Should I just take the picture I want to use and add 50px of whitespace on top with paint or whatever then upload that? Or is the a way to set this is CSS?
Use #media queries to write window size specific css. Example:
#media (min-width: 400px) {
.element {
background: #cccccc;
}
}
#media (min-width: 500px) {
.element {
background: #888888;
}
}
#media (min-width: 600px) {
.element {
background: #222222;
}
}
Here's is a Fiddle: http://jsfiddle.net/zhqn1vhh/
Media Queries - Bootstrap Grid
You could have something like this on your own CSS:
#media (max-width: 300px) {
body {
background-color: red;
background-image: image-url("http://placekitten.com/g/200/300");
}
}
#media (min-width: 301px) and (max-width: 600px) {
body {
background-color: blue;
background-image: image-url("http://placekitten.com/g/400/600");
}
}
#media (min-width: 601px) and (max-width: 768px) {
body {
background-color: yellow;
background-image: image-url("http://placekitten.com/g/500/768");
}
}
#media (min-width: 769px) {
body {
background-color: green;
background-image: image-url("http://placekitten.com/g/800/1048");
}
}
<body>
html body
</body>
i do it like this using bootstrap. but Im sure it would work without bootstrap.
.class {
background-image: image-url("beach.jpg") ;
min-height:100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
}
Lots of websites now have a fullscreen background photo (or even video, such as http://www.paypal.fr).
How to add a fullscreen background photo to a Bootstrap page like this demo:
http://getbootstrap.com/examples/cover/
I tried
<div class="site-wrapper">
<img src="photo.jpg">
but the photo was bad positioned.
There are many ways to do this. You could do it via css:
body {
background: url('photo.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
Use background-size: cover; This will give you the aspect ratio you are looking for
Se DEMO
body{
background: url("http://upload.wikimedia.org/wikipedia/en/b/b2/Brad_Pitt_boxing.jpg") no-repeat 0 0;
background-size:cover;
}
Actually you can add a css rule to body in order to display a picture as a background.
body
{
background-image: url('photo.jpg');
}
In addition to this, if you want background image to cover whole screen, you may add background-size property.
body
{
background-image: url('photo.jpg');
background-size: cover;
}
If you do not want to resize image on narrower screens to keep aspect ratio, you may write conditional rule like the following. Remember to prepare photos differently resized for some screen sizes.
/*for screens larger than 959px */
#media (min-width: 960px) {
body {
background-image: url('photo-xl.jpg');
background-size: cover;
}
}
/*for screens larger than 767px */
#media (min-width: 768px) {
body {
background-image: url('photo-lg.jpg');
background-size: cover;
}
}
/*for screens larger than 479px */
#media (min-width: 480px) {
body {
background-image: url('photo-xs.jpg');
background-size: cover;
}
}
Similar problem was posted but the answers there did not help me.
I have a responsive web site in which the whole background is a mp4 format video. On desktop browsers there is no problem. The code for that is below
#media screen and (min-width: 400px)
{
video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
}
And the media query for small screens is below
#media only screen and (max-width : 400px) {
background: url(../images/tanisalimmobilebackground.jpg);
background-size:cover;
video {
display:none!important;
}
}
The problem is when I view it on iOS Chrome and Safari the video is not hidden and is on the background with controls shown and not started.
What i want to do is if the width is at a max of 400 px , I want to show the jpg that is mentioned above.
I think you need to specify the element that should have the background. E.g:
#media only screen and (max-width : 400px) {
someelement{
background: url(../images/tanisalimmobilebackground.jpg);
background-size:cover;
}
video {
display:none!important;
}
}
I have a div
<div id="page">
</div>
With the following css:
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
I notice when I resize my browser, I see the "mobile" background (good) but if I go back and make my browser large, my previous "large" background does not always reappear.
It's an intermittent problem but it's happening often enough that I think I should address it.
Is there any way to get around this "background image not appearing" problem or a way to resize background images, so that the media query "shrinks" the background image to fit the new size? As far as I know there is no (widespread) way to change the size of a background image...
According to this test:
If you want only the desktop version of the image to be downloaded on the desktop...
and only the mobile image to be downloaded on the mobile device -
You need to use a min-width declaration to specify a minimum browser width for the desktop image...
and a max-width for the mobile image.
So your code would be:
#media (min-width: 601px) {
#page {
background: url('images/white-zigzag.png') repeat-x;
}
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
The code you provided is a little buggy which is probably a good place to start currently you have
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
The media query portion isn't complete. You still need to provide the CSS selector that you used outside of the query:
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
Start with that and let me know if that fixes things.
please use
#media screen and (min-width: 320px) and (max-width:580px) {
#page {
background: url('images/white-zigzag.png') repeat-x
}
}
<div style="width: 100%; height:100%;" class="bg"></div>
.bg{
background-image:url("coc.jpg");
background-repeat: no-repeat;
background-size:cover !important;
background-position: center;
overflow: hidden;
}
#media(max-width:900px){
.bg{
background-image:url("all.jpg") !important;
background-repeat: no-repeat;
background-size:cover !important;
background-position: center;
overflow: hidden;
}
}