I've searched just about every string of words possible to try and find a solution to this issue and have had no luck. Here's the code I have for the header:
/* MAIN HEADER */
.header {
background-image: url(../images/kt-header2.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: fixed;
background-size: cover;
margin: 0;
padding-top: 0em;
padding-bottom: 5em;
overflow: hidden;
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is what the header img looks like when the browser is smaller.
This is what it looks like when the browser is larger.
For all I know, this is a mess and the solution is obvious. I've been trying to piece things together with no previous knowledge of css, so I'm flying blind here.
I have linked a recreation of the code as a comment under the first comment on this post. Because I am a new user, I can't put more than 2 links in this post.
Did you try to add a set height to the header? If you add the set height, it won't be overcome by the other elements on a larger browser
I added: .header{height: 100px;) (used another image)
https://jsfiddle.net/toolbox3/8Lbdx2fm/
Related
So for my website hostup I tried to add sprites since I had over 25 images and google pagespeed complained. I solved my sprire not displaying issue, but I am not sure why. Why is it that you have to load the image in each and everysprite, to waste bandwith and slow down pagespeed?
.sprite {
background-image: url(../img/spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-backup_icon {
width: 60px;
height: 60px;
background-position: -5px -5px;
}
.sprite-cpanel_icon {
width: 60px;
height: 60px;
background-position: -75px -5px;
}
.sprite {
background-image: url(../img/spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-backup_icon {
width: 60px;
height: 60px;
background: url(../img/spritesheet.png);
background-position: -5px -5px;
}
.sprite-cpanel_icon {
width: 60px;
height: 60px;
background: url(../img/spritesheet.png);
background-position: -75px -5px;
}
html code
<div class="sprite-backup_icon"></div>
So the 2nd. works just fine, but the 1st. does not display any image, Just a blank image with the defined width and height, why is this?
To answer your first question:
If the browser finds an image in a Style Sheet, it will download it and then store it in your browsers cache. The next time that same image is found/requested in a Style Sheet from the same URL (even during the same initial page load), it will be served from cache. NOT re-downloaded. So while you may have spritesheet.png 3 times in your Style Sheet, it is only downloaded once and not wasting bandwidth or page loading speed.
It is because of this caching feature that sprites are favoured in providing things like icons and other smaller images.
For your second question on why your first CSS example does not work, it could be any number of issues ranging from a simple typo, or all the elements you are wanting to use the sprite with not having the sprite class.
In order to properly help you with this problem, we need to see your HTML that goes along with the posted CSS. Please make an edit your question and add your HTML as a code snippet.
There are multiple places on our website where we are using .svg's with the background image rule to create shapes.
For example:
&:before {
bottom: auto;
height: 4rem;
content:'';
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url('img/layout/press-before.svg');
background-size: 100%;
background-repeat: no-repeat;
#media screen and (max-width: $viewport-xs) {
height: 2rem;
}
#media screen and (max-width: $viewport-sm) {
top: -.1rem;
}
}
This works well on desktop on all resolutions.
But on several mobile devices using chrome there is an issue when the adjected block has the same color.
There seems to be 1 or several pixels which are being interpolated incorrectly which leads to an edge of the underlying element showing.
Things I've tried:
+ use png, jpg instead of .svg to see if the problem relates to the rasterisation of .svg (problem persisted without difference)
+ moving the image up sligthly (line remained)
+ making it slightly larger (line remained)
For reference, see the following images.
issue example 1
issue example 2
Any suggestions are greatly appreciated!
The solution for me was to move the image up a little by adding top: -1px to the pseudo-element.
I tried this before I posted this question here and it didn't work.
This was related to the fact that the parent of the pseudo element was using overflow-x: hidden and because of this the overflow-y was automatically also hidden (I'm adding this for anyone having a similar issue).
Of course this means I need to tweak the shape of the svg's a little because it has moved up 1px.
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".
I am trying to embed this video on this virb page: http://www.amytdatta.com (password: tyma)
It's an album pre-release, hence the site password, sorry!
Try as I might, i'm unable to emulate the full window scaling behaviour of the vimeo video page. I've tried putting min-width: 100%, min-height: 100%, max-height: 100% everywhere but my embedded video is taller than the browser window and doesn't scale in the neat way the vimeo page does.
any advice?
The problem lies within your CSS properties.
If you take a look at the following codesegment (base.css, line 208):
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
You will see that you have a padding at the bottom aswell as a defined position. Just delete those two lines, so it looks like this:
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-top: 30px;
}
It'll look like you want it to.
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.