This may be a stupid question but I am trying to set a static background image onto the body of my site but I don't want to repeat the image. I have this:
body{
background:url(../assessts/BG.png) center bottom no-repeat,#000;
background-size:100% auto;
}
Which doesn't show the image at all, however if I remove the no-repeat:
body{
background:url(../assessts/BG.png) center bottom,#000;
background-size:100% auto;
}
This shows the image fine. The image is quite large anyway and fills my 19 inch screen well without the no-repeat option. But as a fail safe for very large screens I would like the image not to repeat.
Where I am more confused is I have a div later on in the CSS that using a similar method:
.head{
position:absolute;
z-index:1;
top:0px;
background:url(../assessts/logo.png) center -60px no-repeat,#000;
background-size:300px auto;
width:100%;
height:200px;
display:block;
box-shadow:0px 4px 4px #000;
-moz-box-shadow:0px 4px 2px #000;
-webkit-box-shadow:0px 4px 2px #000;
}
But this works with no errors. If I'm not mistaking it is the same?
Have you tried rearranging the order of the properties, i.e. background: #000 url(../assessts/BG.png) no-repeat center bottom; See W3C notes on shorthand property order.
Related
i m trying to fit this image inside the container , when i use cover it grows out and only a small part shows and when i user contain it shrinks i tried other things but it is not working .
.banner{
background-image: url('banner1.jpg');
background-repeat: no-repeat;
background-size:cover;
box-shadow: 0px 0px 10px 2px rgb(253, 235, 195);
}
If text doesn't need to appear on top of the image maybe you should try just putting a img tag. You can stretch it with no sweat.
img{
height:200px;//or whatever height you want for the banner
width:100%;
}
I am trying to fix scrolling preformance problems on my site. I have a few div elements with background-size: cover and background-attachment: fixed. As I understand these are pretty gpu intensive. I am trying to fix the problem by making the background images a separate layer on the div.
I found this site that demonstates how to do this, but I am confused by what they have done. What is #include clearfix;? How can I implement this on my site?
https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property
I have attached the code from a div element on my site which I hope to optimize.
Also, here is the url to my site (its a work in progress but you can see how there is scrolling issues).
http://petermankiewich.com/
Thank you for your input!
.imagediv1 {
background-size: cover !important;
background-attachment: fixed !important;
max-height: 1500px;
height: 70vh;
background-position: bottom center !important;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
<div class="imagediv1" style="background:url(Images/workstationpic.jpg)"></div>
Change the Position property to relative and check if it works for you.
.frontCover{position: relative;}
I'm making a website using Dreamweaver CC 2015 and it's fluid grid layout. I got the design as I want it but when I resize the browser to simulate a tablet or smartphone the images do not stay together?
You can see it on this page: www.sverkel.dk
This is an issue with the value of background-size. You are setting it to 100%, but you should be setting it to 100% 100%. Once you fix that in the style sheet, the images will always stay together without leaving any gap between them. For example:
#midt {
background-image: url(../billeder/bgmidt.jpg);
background-repeat: no-repeat;
height: 100%;
background-size: 100% 100%;
}
Why does this happen? If background-size only gets one value, it is interpreted as the value of the width of the image, and the value of the height is set to auto. You need to specify two values so you are setting both width and height (source).
As explained in the comments below, this may cause some issues with the rounded borders not looking nice as the image is stretched.
If you can, it may be a good idea to move to a CSS-only solution (without images), that will adapt to the screen size and keep the proportions all the time. It will also save you some bandwidth as you'll stop using 100KB in images. The only con is that you may need to do some tricks to make it work in old browsers (although it doesn't seem like you need that, see JSFiddle below).
Something like this (you can also see a more in-depth sample on this JSFiddle):
body {
background: url(http://www.sverkel.dk/billeder/bg.jpg) center center;
}
.gridContainer {
width:90%;
max-width:1200px;
border-radius:10px;
box-shadow:0px 0px 16px rgba(0,0,0,0.8);
margin:auto auto;
text-align:center;
background:#e5e5e5;
}
.gridContainer #top {
background: #b4b4b4; /* Old browsers */
background: linear-gradient(to bottom, #b4b4b4 0%,#e5e5e5 100%); /* W3C */
height:125px;
border-radius:10px 10px 0px 0px;
}
.gridContainer #bund {
background: #b4b4b4; /* Old browsers */
background: linear-gradient(to bottom, #e5e5e5 0%,#b4b4b4 100%); /* W3C */
height:125px;
border-radius:0px 0px 10px 10px;
}
.gridContainer #menu {
background: #cf5858; /* Old browsers */
background: linear-gradient(to bottom, #cf5858 0%,#902727 100%); /* W3C */
height:45px;
line-height:45px;
color:rgba(255,255,255,0.9);
border-radius:10px;
margin:16px;
}
<br/>
<div class="gridContainer clearfix">
<div id="top" class="fluid"></div>
<div id="menu" class="fluid">Forside - Produkter - Priser - Om - Kontakt</div>
<div id="midt" class="fluid">Hvad så der?</div>
<div id="bund" class="fluid"></div>
</div>
I'm wondering if the following is possible with CSS.
I'd like there to be 3 horizontal bars running across the entire width of a background. Here's a rough mockup of what I would like the background to be
I've been toying with the following but I can't seem to be able to position any of the backgrounds.
#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
url("bg2.png"),
url("bg3.png");
background-position: 10px 10px,
170px 10px,
750px 10px;
background-repeat:repeat-x;
}
Here's a fiddle: http://jsfiddle.net/5fo054L2/1/
Any idea what I'm doing wrong?
You almost have it. The issue is that you have the x and y position confused. Also, x position doesn't have any meaning if it repeats.
.blog {
width: 100%;
height: 100%;
background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png");
background-position: 0px 170px, 0px 100px, 0px 10px;
background-repeat: repeat-x;
}
Here is an updated jsfiddle: http://jsfiddle.net/5fo054L2/3/
Note that the vertical height (of text in your example) will limit the amount of the background images you see.
You can also make three image files, place them below everything else, and set them using absolute positioning.
I've tried a couple things, but nothing has fixed my issue. On iOS, a white bar is showing to right of the site cutting off some of the content. Help?
http://qusik.com/newsite/
Thanks in advance!
I rechecked your site, your ipad image and its container is way more wider than your other containers, try to reduce its size to 960-940 width
You're probably seeing that white-space due to the fact that your content is overflowing your viewport as the page is shrunken on your tablet/mobile device, one way to fix it would be to remove that background image and color from your header and creating a .bg div with it instead and positioning it absolutely (stretching it in all directions, e.g. top:0; right:0; bottom:0; left:0;), relative to the body so it will stretch in all directions in your screen, like so:
.bg {
background-color: #000000;
background-image: url("images/tint_blue.png");
background-position: 50% 0;
background-repeat: no-repeat;
border-bottom: 1px solid #FFFFFF;
position:absolute;
top:0; left:0; bottom:0; right:0;
z-index:-1; /* to place it behind everything else, just make sure not to have bg colors on your page elements */
}
Another (while very unorthodox) method is to place your bg image and color on the html tag instead, like so:
html {
background-color: #000000;
background-image: url("images/tint_blue.png");
background-position: 50% 0;
background-repeat: no-repeat;
border-bottom: 1px solid #FFFFFF;
}