We are using EO.pdf 16, we have css for body tag
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-y;
background-position: center center;
/*background-size: cover;*/
height: 98%;
width:100%;
padding: 0px !important;
margin: 0px !important;
}
We want the background-image on the browser but not in the PDF.
Thanks in advance,
Anjan
This is fixed in version 16.2.9 of EO.
Related
I'm not a coder but have some basic knowledge and have been editing a template. The site is almost there - on desktop it looks fine but on mobile the cover image doesn't scale down.
I've tried changing the size from 100%, auto and cover, played with vw and vh etc, but still can't get anything to work.
Here's the CSS:
.intro {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: auto;
-o-background-size: auto;
}
If anyone can help that would be great! the site is adammillsmusic.com
Thanks!
For Responsive Images do the following in .intro class
intro {
max-width: 100%;
height: auto;
display:block;
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
background-size: contain;
-webkit-background-size: contain
}
Key changes
max-width: 100%;
height: auto;
display:block;
Hope this helps
You are prefixing properties different values :
-webkit-background-size: cover; : On webkit (Chrome & co), cover the background
background-size: auto; On other browsers, do not cover
This is probably why you see a covered background on your desktop and having unexpected results on a mobile browser.
body {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(//placecage.com/200/200) no-repeat center top;
background-color: #e5e5e5;
background-size: cover;
}
Set your max-width to 100% like this:
max-width: 100%;
Thanks for your help - this did solve the problem. Though now after seeing the result, I think maybe it would be wiser to call a smaller size image through the use of '#media' for the mobile site. The only problem is in my code editor when I try to do this it doesn't seem to recognise the '#media' tag and treats it like /* */
Any thoughts?! Thanks
#media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}
I'm building a website and the image I want to put in the as background I can't put it into the position I want.
I want the 'focus' of the image on the web page to be a few px up to the centre of the image. The width I can see it all, but the height no.
The image resolution is '5760x3840px'.
So, I have this piece of css code for the image's settings.
.topwidget{
max-width: 100%;
height: auto;
background-image: url(../images/welcome_banner_bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: bottom 1000px;
margin-bottom: 20px;
padding: 50px 0;
}
Try this
.topwidget{
max-width: 100%;
height: auto;
background-image: url(../images/welcome_banner_bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
**background-position: center 10px;**
margin-bottom: 20px;
padding: 50px 0;
}
I put background-image on my site but the result image is stretched.
How I can avoid it?
CSS:
background: rgb(236, 242, 196) url(../images/border.png) no-repeat;
background-size: 100% 100%;
margin-left: auto;
background: rgb(236, 242, 196);
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 75px;
How I can avoid stretched image width and height and make it auto width and height.
If I understood correctly your problem, you should use:
background-size: cover;
I am making a simple landing page and am trying to get the following image to be the background fullscreen: image
My CSS currently looks like this:
body {
background-image: url('/images/bg.jpeg');
width: 100%;
height: 100%;
position: fixed;
}
A majority of the image is getting cut off, what's the best way to remedy this?
Thanks !
Did you tried this :
body {
margin:0;
padding:0;
background: url('/images/bg.jpeg') no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Heres a cool idea for a landing page. The background, being fixed is a popular cool way for landing pages. Please, to see this properly, click "Full Page" on the top right after clicking run code snippet.
#import url(https://fonts.googleapis.com/css?family=Lato:300);
div:nth-child(1){
background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
height: 750px;
width: 100%;
background-size: cover;
background-attachment: fixed;
}
div:nth-child(2){
height:400px;
width: 100%;
background-color: black;
z-index: 1;
}
h1{
text-align: center;
color: white;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
padding-top: 300px;
z-index: 0;
text-shadow: 0 0 2px black;
font-size: 50px;
}
<div>
<h1> Michael Barreiro </h1>
</div>
<div></div>
Because of the height/design of this company's logo we created an header image that includes it. That header image is located here:
http://tinyurl.com/oqkpvff
Anyone know how to make that header image resize automatically for mobile/smaller tablet?
#title-container {
background-image: url("url of our image is here") !important;
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
}
I did try height: auto but that didn't work either.
You can use the background-size: contain;
Demo
#title-container {
background-image: url("http://tinyurl.com/oqkpvff");
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
background-size: contain;
}
contain
This keyword specifies that the background image should be scaled to be as large as possible >while ensuring both its dimensions
are less than or equal to the corresponding dimensions of the
background positioning area.