I am redesigning a website for fun and I was messing around with some JQuery and some CSS effects. When you click on an arrow, everything on the page gets pushed down and a video comes up. The issues is I'm trying to create a section for an image. However, changing the background-size of the image to cover ends up making the entire image take up the screen. If I manually change the size of the image then the image is distorted.
Here is the HTML:
<section id="content">
<img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466799500/background_image_mjh10z.jpg"class="stuff"> </img>
<h1>Click the arrow to view Kai Greene's Scar Story</h1>
<span class="msg"><button = class="btn btn-danger">Sign up for our News Letter</button></span>
</section>
<article class="buy">
<h1 class="products text-center">View other products</h1>
</article>
</div>
Here is the CSS:
.stuff{
margin-top: 100px;
background-soze: cover;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
You can view the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO
Instead of background-size, use width or height to set your desired image size. You can also use object-fit: cover to keep the image aspect ratio no matter what size you set. Its like doing a "cropping" effect.
You would probably have to change the size of the image manually. Setting the width to a certain value and setting height to auto or visa versa should not distort the image. So setting either width or height to auto shouldn't distort the image.
http://www.w3schools.com/css/css_rwd_images.asp is a helpful resource for image sizing in CSS
Related
I am trying to get a picture on my home page. I made a container and a div within the container. When I use pixels as width and height the picture appears but when I use 100% it does not. I tried changing the container to pixels to see if the image would render but it did not.
<div class="container" height="100%" width="100%">
<div class="splash-div" ; style="background-image: url('../../Images/laptopboy.jpg'); background-size: cover; width: 100%; height: 100%;">
</div>
</div>
Why doesn't the picture appear when I use the percentage for height and width?
I think the problem is your image path.
You have entered a wrong path of image file.
Change path and try again.
I am trying to overlay an image over another base image.
The images that I am using do not conform to a particular size but varies from page to page.
Each image overlay uses a style sheet similar to the one mentioned below:
#image1 {
position: absolute;
top: 44.594%;
left: 30.642%;
transform: translate(-50%, -50%);
}
The base image uses a style sheet similar to the one mentioned below:
.base-image {
position: relative;
text-align: center;
}
Thus far, if the image is smaller than the screen size I don't have any issues.
If it is larger than the current screen size, the positions are relative to the screen size.
If I change the base-image position to absolute, I do get the effect I am interested in but the rest of my page becomes hidden under the base-image.
Is there anything in CSS that I can do to achieve my desired effect?
One of the fragments of a page:
<div class="base-image">
<img src="Content/Images/baseimage.jpg" />
<div id="image1">
<img src="Content/Images/image1.jpg" alt="image1" />
<br />
<span>Some Text</span>
</div>
<div id="image2">
<img src="Content/Images/image2.jpg" alt="image2" />
<br />
<span>Some Text 2</span>
</div>
...
</div>
The question is similar but does not address my problem directly:
Html Image over image
Their solution is what I have been using thus far for me to overlay the image. But for some reason, when the image resolution is larger than the screen size, the resultant overlay appears to be scaled down to fit the screen resolution. The image locations are therefore all wrong with respect to the base image.
I am pretty sure you can make a <div> with the same position properties as your current picture and then have the pictures inside the <div> have a position:fixed and then move the pictures as you like with top:10%; left:10% and etc
Hope this helps
I'm looking for a solution of my problem.
I am using twitter bootstrap for a mobile site and this is my outcome on mobile view:
<div class="row">
<div class="span4">
<div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/catalogimagecardealer#2x.png');></div>
<p class="metadataTitle metacell">
<span style="display: inline-block" class="ellipsis">Car Dealers</span>
<span style="table-row"></span></p>
</div>
</div>
</div>
The css of the div where my image is in:
background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 300px;"
But as you can see there is a margin between the image and the content below, does anyone know how I can fix this?
background-size:contain;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
"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."
So your image has been scaled so that it fits into the element completely - you seem to want to use cover instead:
"cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area."
Set margin:0; padding:0; to both the image and the content below. This will remove any margin. Since HTML adds a margin by default, you need to explicitly tell HTML to remove a margin.
hello i have a problem with using my background graphics.
the structure of the site is the following:
header contains two colors with a fixed height of 100px.
mainframe should contain a sliced image with a variable height.
footer contains one color and has also a fixed height of 100px.
so my sliced image has a height of 550px and will fit exactly between header and footer in case the content would not be larger.
<html>
<body>
<div class="wrapper">
<div id="header">header</div>
<div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>
<div class="push"></div><!--Push for sticky footer-->
</div><!--Wrapper -->
<div class="footer">footer</div>
</body>
example
now the problem is, that my content will be larger than 550px and because of a fading colour there will be a hard edgde and you can see where the image ends. so i thought it would be nice when that sliced background image could automatically be resized.
is there a way to realize that by using css?
thanks alot.
Short answer: unfortunately, there isn't a way to resize background images with CSS.
Often, there's a clever workaround using the background-repeat:repeat-x; or background-repeat:repeat-y; properties, and using a carefully sliced background image.
If you have an example of the image, I may be able to help more.
Try
background-size: 100% Auto;
You could try
background-size:cover;
I have an image on the top page that's 960x200px wide. It's in a div tag. What happens is when I scale the page by pressing ctrl+scrolling, the image scales out of the page, off the screen, and gets cropped off. How can I make it that when I scale the page, like amazon.com or other websites, the page doesn't become cropped and instead, I get an horizontal scroll bar at bottom of the browser?
/* css */
#header { background-image: url('image.gif'); }
<!-- html -->
<div id="header"></div>
This is happening because your image is a background-image.
Therefore the width of the image is not being calculated as part of the width of the page.
If you want this not to happen, make your div#header explicitly 960px wide.
You need to make the header image part of the HTML code like this.
<div id="header">
<img src="image.gif" width="960" height="200" />
</div>