I am trying to display a background image behind the navigation link, but it is not displayed completely this is the code:
#aboutlink{
background-image: url(sidebar.png);
background-repeat: no-repeat;
background-position: left;
background-color: transparent;
display: block;
margin-bottom: 160px;
text-align: left;
}
Set the width and height of the navigation link, otherwise the image will be cut off and won't display fully
Set width and height to match the size of the background image. The reason the image is being "cut off" is because the background image isn't taken into account as it automatically calculates the width and height to only be as big as it needs to be.
Related
I'm using css sprite and currently this is how it looks like Icon is part of sprite
It stays fine but when i start changing the zoom of the browser nearby image starts to bleed in the image
Adjacent logo bleeding in
I tried increasing the padding by 100px as well but it is not a correct solution.
I need to ensure the sprite image stays in correct aspect and doesn't bleeds as the page is
zoomed.
I tried using a div wrapper but in this case it is not wroking.
here's the code
.icon {
width: 512px;; height: 512px;;
background-size: auto 70%;
height: 70%;
background-position: center center;
cursor: pointer;
background-size: cover !important;
background-repeat-x: no-repeat;
/*zoom: 0.049;*/
background: url("../resources/images/css_sprites_ico.png") 1px -3657px;
}
and the code where this is implemented is this
{name:'setup',index:'setup',label:'Setup',width:80,align:"center",search:false,sortable:false,cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
var classes = "icon";
I am trying to have a background image cover the vertical length of the page. When I add background-repeat: repeat-y; the image stretches. When I have background-repeat:no-repeat; it doesn't stretch. What is happening here? I don't want it to stretch, I just want it to repeat until the bottom of the page.
Here is the CSS:
.backgroundTest{
background-color:white;
background-image:url(../images/sideBanner.jpg);
position:absolute;
background-size:175px 100%; /* I need this, otherwise the background image is too big */
background-repeat: repeat-y;
}
The main issue is I want an image along the left side of the page (width 175 px) with all the content to the right of this image. I'll take any solution!
Use table where you can add contents in one column and image in another column.You can set width of image accordingly
try this,
background-size: 100% auto;
I'd wrap the image in a <div> and use the background-size CSS property with one of these two values:
contain
Scales the image as large as possible without cropping or stretching the image.
cover
Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
e.g.
.wrapper-container {
position: relative;
height: 100%;
width: 175px;
}
.backgroundTest {
background-image: url("../images/sideBanner.jpg");
background-repeat: repeat-y;
background-size: contain;
background-color: white;
position: absolute;
}
Info: I have a cropped image used as a background image for the top of my webpage. In CSS I've defined in px the size of a div containing the image - which is cropping the image. (I'm doing this in Squarespace). So when you enter the page you see the background image (and some text) filling the screen and you then scroll down past the image.
The problem: when I reduce the size of the web browser window the div, of course, maintains the same px height. This means the image ends up being background for most of the page - I just want it to be on the top when you enter the page.
The question: how do I make the cropping div responsive in height? As far as I have researched I can only set the value in px which isn't responsive-friendly... The following code is based on my external screen size. So I need that height px for large screens.
My code:
.header-background {
position: absolute;
top: -160px;
left: -335px;
right: -335px;
height: 850px;
z-index: -1;
overflow: hidden;
background-size: cover;
background-position: center;
background-image: img src('/s/Sams-sort.png')
Give it to a free height that takes up the higher space only
height:auto
We have a long frame(about 3.5:1 width to height) in the page.
Most of the photos showing are 4:3, bigger and improper aspect rate to the frame.
The long frame is really wanted by the costumer, not to plan to change the frame size so far.
Currently the way it displays is "width resize to the frame width, then fill from the top of the photo to bottom of the frame".
in this way almost half of the photo was cut from the down below, and it looks really bad.
I know it's almost impossible to fit both width and height without ruin the photo.
So my plan is try to display part of the photo from the center.
How should i write this CSS?
Note: the "frame" here is a "div"
One option if you want to use img elements is use position and transform to center the img on the frame while keep the proportion with padding like this:
.framed {
position: relative;
width: 100%;
/*Proportion 3.5:1 with the padding*/
padding-top: 28.5%;
overflow:hidden;
}
.framed img {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<h5>Original Image</h5>
<img src="http://placekitten.com/200" />
<h5>Framed Image</h5>
<div class="framed">
<img src="http://placekitten.com/200" />
</div>
Personally, I'd use background-image and background-position. On your frame, you could apply the following CSS:
#myFrame {
background-image: url('/path/to/image.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
background-size: cover; scales the background image proportionally to take up 100% of the frame.
background-position: center; will center the background image, just as you've outlined in your desired example.
background-repeat: no-repeat; is just to stop the background from repeating, which is default behavior.
Of course, change the /path/to/image.png to your relative image path.
Here is an example of this behavior.
How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/
The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)
I can only seem to get the whole image to scale when I resize the browser.
I am currently using the following code for my img class:
img.mail {
width: 100%;
height: auto;
}
Or do you mean this?
background-position: center;
background-image: url('....');
background-repeat: none;
width: 100%;
height: 100px;
It cut instead of scale like what you have posted.
NOTE: You need to have wide picture to make it work prettily
I use:
max-width: 100%;
height: auto;
They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.
e.g.
#feature {
background: url("path/to/img") center 0px no-repeat;
width: 100%;
height: 50px; // Height of image
}
example: http://jsfiddle.net/xY9qT/1/