In my CSS file I have the following piece of code but find the screen still not being covered.
The Edge is working good, but with the scroll bars. Footer also visible.
The Internet Explorer has a black portion at the bottom. When I click Alt making the menu items appear, the entire screen fills up and footer becomes visible.
The Google Chrome has an average of the two thus having the footer cut in two.
body {
font-family: Calibri;
font-size: 20px;
line-height: 1.428571429;
color: whitesmoke;
background-image: linear-gradient(to bottom, black, darkslategrey);
background: inherit center center fixed;
background-size: cover;
}
Add this property to your css:
body {
height:100vh;
}
Related
I'm having a problem displaying a small image using CSS. I'm trying to show an icon sized picture (the picture has a few pixel border so it isn't edge to edge) but the image itself isn't centered when it's displayed and part of it is being hidden by the right and bottom shadows of the surrounding box. I like the look of the shadows but I think the image is so small, the shadows of the box can't be ignored in the sizing. Here's my CSS. Any ideas?
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
}
Try this, adjusting the background-position values until your image is positioned correctly:
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
background-position : -3px -4px;
}
Expanding on this a little further, you might want to try to add all your small images into one icon image in a matrix style. Then you can select just the image you want using the width, height and background-position. This will allow all your icons to be loaded at once as a single file, reducing internet traffic. When a "new" icon is needed, it will already be cached and immediately be available.
background-image: url("icons.png");
background-position: 30px 40px; /* Use these values to select your small image contained in your large image */
background-repeat : repeat;
width : 20px; /* or however large your icon is */
height : 24px; /* or however large your icon is */
I have wordpress site, and i want change background, and i need two images to background
Example:
http://i.imgur.com/8HMY8al.png
I want it to body, code is now that:
body {
background: #fff;
color: #494949;
font-family: Arial,Trebuchet MS,Helvetica,sans-serif;
font-size: 12px;
line-height: 18px;
background: url(images/bg1.png) top left repeat-x #D3D5D4;
}
What i need add here?
i think bg2 need to fit to screen (site)
Seperate it into two div and apply different background for each div
You can set seperate background to html element and seperate one to body element.
With CSS3 tricks, you can apply multiple background to only one div. See this example :
body{
background:url(images/img.gif) no-repeat left top,
url(images/img.gif) no-repeat right top,
url(images/img.gif) no-repeat left bottom,
url(images/img.gif) no-repeat right bottom;
}
Careful with browsers compatibility. Hope it helped ;)
Objective: To create a clickable button with a CSS rollover. The button is intended to be blue and, when the mouse is over it, the color changes to orange.
Problem: My technique works fine for major browsers (Chrome, Firefox, IE). But when I zoom the page (which I do by default in Chrome), a small horizontal blue line appears on the top of the button when the mouse is over it
Here is an image with the problem:
http://hostpicture.eu/?di=JZ05
Any ideas on how to solve this problem?
There is no problem when the Zoom is set to 100%. But it appears as soon as I set the zoom to 110% or 120% in Chrome. I tested the page in Firefox with different values of zoom with no problem at all. I also tested in IE9. No problem for zooms of 100%, 125%, 200%, but the same problem appears for a zoom of 150%.
The code I used:
HTML:
<div class="ExerciseButtons">
Check solution
Next exercise
</div>
CSS:
.ExerciseButtons{
margin-top:40px;
padding-left:30px;
}
.ExerciseButtons a{
margin-right:20px;
width:135px;
height:33px;
display:block;
color:white;
background-image: url("images/EmptyNextExerciseButton.png");
background-position: top left;
background-repeat: no-repeat;
text-align: center;
line-height:33px;
font-weight: bold;
text-decoration: none;
vertical-align: middle;
float:left;
font-family: Arial, Helvetica, sans-serif;
}
.ExerciseButtons a:hover {
background-position: bottom left;
color:white;
}
The image I used (each button is 135px X 33px. The whole image is 135px X 66px):
http://hostpicture.eu/?di=1GL1
In your image the buttons are touching each other - separate the buttons in the image by a few pixels and that should do the trick.
I have a div which has one of two background positions for a sprite background image depending on the class set for the div in a php script.
The CSS, which is below, works fine on standard browsers, but on the iPad I am not seeing the same. Instead I see more of the background image than I want to. As you can see from the image below, rather than just seeing one star, I am seeing part of another star too.
How can I get the background position/image looking right on the iPad?
.normal, .favourite {
width:18px;
height:17px;
margin-right: 4px;
border:none;
cursor: pointer;
display:inline-block;
vertical-align: middle;
background-color:transparent;
background-repeat: no-repeat;
}
.normal {
background-image: url('/images/playlist_sprite.png');
background-position: left bottom;
}
.favourite {
background-image:url('/images/playlist_sprite.png');
background-position: right bottom;
}
Rather than defining the background position using left/right/bottom try defining it exactly using pixels.
e.g.
background-position: XXpx XXpx;
Also, make sure that both those images in your sprite are exactly 18px by 17px as that is what the class is saying the image size will be.
I'm curently workign on this page and I'm trying to make the background repeat-y from a certain height but to no avail. If you look at the link's background (bottom area); you'll see that it leaves a an ugly space there, which is ugly. The CSS is as show below
body {
font-family:Calibri;
font-size: 16px;
margin: 0px;
padding: 0px;
background-color: #000;
background-image: url(images/bg.png);
background-repeat: repeat -200px 0px;
}
There's no way I'm aware of that makes the repeat skip some pixels. If I were you I would split them so the background-image of the body would be what the majority of it is now without the top. And then I would add a div to the top with these settings:
<div id="upperpart"></div>
in css:
#upperpart{
background-image: url(whatever it is);
width:100%;
height:how high it is
background-repeat: repeat-x;
margin-bottom: minus its height; <-- this will make everything below this div get ontop the div
}
After some mathematical thinking and experiments, the line of code below did the magic. I had to also watch where to cut it off with -1530px. Make sure you use the same background you used with the body tag.
html {
background: url(images/bg.png) repeat 0px -1530px;
}