So I want grass to fill from left to right right above my footer. I am having a hard time getting it to repeat itself. I set positition to fixed, and also float: left but still no luck. I would just continuously keep putting more images hardcoded in my HTML, but I feel I can do this with CSS and not have like 100 lines of extra code. Also, I want the images to grow or retract if the user makes browser larger or smaller.
live demo
HTML
<figure>
<img src="arrow.png" alt="arrow" class="arrow">
<p class="clickHere"> Click one! </p>
<img src="downwardmonkey.png" alt="down" class="head">
<img alt="down" class="footer">
</figure>
CSS
figure img.footer
{
position: fixed;
bottom: 45px;
float: left;
background-image: "grass.png";
background-repeat: repeat-x;
}
if any other code is needed to help let me know!
Instead of putting images tags put a div and provide background image to it
<figure>
<div class="grassImageDiv"></div>
</figure>
CSS:
.grassImageDiv
{
display: inline-block;
background-image: url("grass.png");
width:100%; //To make it browser size independent
height: 80px;
}
You can give height and width according to your need.
Related
I need help with some code, I am trying to make an image basically zoom in within 240px by 240px div, I don't know how exactly how to explain it, but basically the image needs to be zoomed in on and only in a certain square area.
the first one here is fine, doesn't need anything changed, but the second one doesn't fit within the whole square because it is too small.
<!-- 2 --><a class="wsb-media-carousel-wrapper img_rounded_corners" rel="wsb-media-carousel-desktop" href="productimg/bowk-inside.jfif" data-fancybox-type="image" style="height: 240px; width: 240px; margin: 20px; display: inline-block; vertical-align: middle;"><img src="productimg/bowl-inside.jfif" style="width: 240px; top: -39.2138px;"></a>
here is how it looks: i want the second one to look like the second one without actually resizing the image out of the code. i got this code from another website but cannot figure out how they made it fit.
my website: my website
their website: their website
The style attribute object-fit specifies how elements such as images should be placed inside of it's container. You can learn about it at https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I have created a basic example of object-fit set to cover on a series of images to create the effect you are looking for.
img {
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 20px;
}
img.orig {
object-fit: initial;
height: auto;
}
<p>Original Images</p>
<img class='orig' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/hub-default.jpg" alt="">
<img class='orig' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/background1.jpg" alt="">
<hr>
<p>Object-fit images</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/hub-default.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/background1.jpg" alt="">
I am creating a mobile e-mail template (means no javascript) which has to be responsive.
I want to place several images inline, which are scaled down as the screen gets narrower. I did this by using css table and table-cell, and let the image scale. No problem so far.
However, since images are often blocked by e-mail clients, I was requested to create a kind of placeholder in grey, showing the image "alt text" when the image is not loaded. I want this placeholder to be of the same size as the contained image, and to scale at narrower widths too.
I got quite far, as you can see in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/
HTML:
<div class="table">
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
</div>
CSS:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
padding: 0 5px;
border: 1px dotted black;
}
.placeholder {
max-width: 120px;
max-height: 60px;
margin: auto;
background-color: #505050;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
However, there are two problems:
As the screen gets narrower and the images are scaled, the background-color pops out from under the image. The placeholder-div is scaling just as the image, but its height is calculated (by the browser) to be some 5px more then the image height. Where does that difference come from?
When the images are not loaded (try in the fiddle by just making the image URL invalid) then the placeholder-div's height collapses. How can I make it keep the correct height?
FYI: The actually used images won't always be of the same size, but I will know their dimensions and can calculate their aspect-ratio. I would write those values (like 120px) inline instead of in a separate css-file like in the example.
Thanks in advance for any help!
Add display: block to your CSS img rule to make it a block element instead of inline and you are good to go: Fiddle
Change src="...." of one of them to src="" in the fiddle and you will see the the cell itself already scales.
By adding rule img[alt] { font-size: 2vw; overflow: hidden } to your CSS, the html alt="text" will scale too. overflow: hidden chops excess text when alt is larger than your 120x60px.
(note: [alt] is called an 'attribute' in CSS, search for 'css custom attribute' should you want to learn to create your own.)
See updated Fiddle
I would advise against loosing the width and height rules of the placeholder, but you could change it to min-height/min-width to show at least that something 'is missing'. Or change to max-width: 100% and remove max-height, but this depends on your requirements. You will need to limit the size of an image somewhere up or down the line (for example giving the table a width in px and it's children a (max-)width in % ).
Remove:
img {
height: auto;
}
problem-1 & 2:
img {
max-width: 100%;
max-height: 100%;
}
So the banner I made at the top of the page is too short horizontally.
I already tried adding "width: 200%;" to the CSS but it only made the space around the image bigger, not the image itself. Please help.
The banner is the giant purple one at the top of this page:
http://www.neopets.com/~ellenore
p.s. please don't make fun of my love for neopets. xD
}
h1 { .left
width: 200px;
margin-left:0px;
margin-right: 0px;
margin: -8;
letter-spacing: -1px;
}
<h1>
<img src="image is here">
</h1>
If you change your H1 tag to:
<h1 style="
width:100%;
height:288px;
background-image: url('http://i60.tinypic.com/rse735.png');
display: inline-block;">
</h1>
Then your image will automatically repeat. However, as it stands your image doesn't repeat too well. So, you'll probably want to edit in your photo editing s/w.
I'd recommend not stretching your image as it won't look very good.
Also, you may want to create your "Shaggy Little Lion" text as a separate graphic which can be centered on top of the image below.
I have an image that should be positioned near the bottom of the screen. I have a main image that is the background image and will resize with the browser size. I need the image over the background image to be 20-30px from the bottom no matter what size screen or if the screen is resized. (Image also must be centered.)
I am not sure how to go about doing this. What is the best way to do this?
Here is the code I have tried:
.bottom{
position:absolute;
margin-left: -355px; /* Image is 710 in width */
left:50%;
bottom:-20px;
}
That code has the image centered on the page properly but not 20px from the bottom. Also I have content below the image and I want the content to stay below the image but it currently comes up over the image.
HTML:
<img class="bottom" src="src-path.png" alt="Text" />
<p style="clear:both;"> </p>
<!-- More Content here that consist of img and p tags. -->
I guess to position the image 20-30 px from the bottom you can use css property
margin-bottom:30px; or 20px what ever value suits you.
for aligning at the center use vertical-align:middle Please do share the code that the thing is more clear. Hope I answered it correctly.
CSS Together must look like:-
margin-bottom:30px;
vertical-align:middle;
You better use a CSS file, in which you declare a footer to be at the bottom of your page. Then put your image in your page, with class of that CSS and id of "footer". Clear enough?
Here is the way I finally did this:
CSS:
.image_block {
/* Size of image is where the width/height come from */
width: 710px;
height: 500px;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/*Nothing Specified */
}
HTML:
<div class="image_block">
<img src="src.png" alt="Alt Text" />
</div>
I have this piece of HTML code:
<div>
<div>
<image src="image-inside-pic-png.png" alt="">
</div>
<image src="pic.png" alt="" />
</div>
The pic.png (300x300 px) is the main image. I would like to put the image-inside-pic-png.png (20x20 px) inside of it. When I apply position: absolute; on the small image, it works only momentarily.
If I change the size of either, it no longer works.
So my question is, how can I move the small image always in the big image - and this small image will be always 15px from the top and 30px from the right margin of the big image?
Thank you for help
I think this should work:
HTML:
<div>
<img src="image-inside-pic-png.png" alt="" class="inner-image"/>
<img src="pic.png" alt="" />
</div>
CSS:
div {
position: relative;
}
.inner-image {
position: absolute;
top: 15px;
right: 30px;
}
Anyway, make sure you need to do this with HTML. Maybe it's better to simply edit the image with Photoshop or Gimp. Or maybe one image it's only for styling purpose, then you should use CSS.
Without changing your markup this can be achieved e.g. using display:inline-block to the outermost div element (so it won't extend for 100% of the available width) and position relative + absolute for outermost div and thumbnail
see this fiddle: http://jsfiddle.net/cRqhT/3/
border and image size are defined for simplicity
put both images in one div which uses position:relatvie, then apply position:absolute to images, and adjust the value as you need.
**html**
<div class="images">
<img src="./images/Rectangle.png" alt="bg"/>
<img src="./images/lady.png" alt="lady" class="lady-image"/>
</div>
**css**
.images {
position: relative;
}
.lady-image {
position: absolute;
top: 0;
right: 0;
}