I did some search here and tried different codes that was recommended but none seems to work. Sorry if this is a basic question but I'm very new to coding.
I'm trying to centre and fit an image to the browser window. What code do i need to use?
P.S the image isn't my background image. I'm changing the color of the background and want this image on top of the background image.
This is the code i have
<body>
<div id="clock">
<img src="images/clock.png" alt="">
</div>
</body>
What CSS code do i need to use to achieve what I'm trying to do?
The first image is how its showing on the browser (basically can only see part of the image since it's enlarged)
The second image is how I want it to look
Add some styling for that image. Add this to your css file:
#clock img{
width: 100%;
}
#clock{
width:100%;
text-align:center;
}
#clock img{
height:100px;
width:auto;
}
<div id="clock">
<img src="http://pngimg.com/upload/clock_PNG6611.png">
</div>
here you can increase or decrease image height:100px; but make sure width is auto otherwise the aspect ratio of that image will effect
try this may help you
#clock
{
margin:0px auto;
text-align:center;
}
#clock
{
max-width:100%;
}
Related
I want linked images to have the size 800x600 with the original proportions. The linked images could have the site 1000x400 or for example 600x1000.
At this time I resize the image with width=800px and in the class div overflow is hidden
<div class="cut">
<img src="www.example.de/image" width=800px>
</div>
This works when the image proportion is like 600x1000, but not when it is 1000x400.
How does it handle every image size?
If you want an easier solution, change the image to background.
Like this:
http://jsfiddle.net/yp7jq0tf/
.image{
float:left;
width:800px;
height:600px;
border:1px red solid;
background:no-repeat center center;
background-size:100%;
}
Html part:
<div class="image" style="background-image:url(
http://www.google.com/images/srpr/logo11w.png
);"></div>
I believe this is what you're looking for:
.image{
width:800px;
height:600px;
background:no-repeat center center;
background-size: cover;
}
You will need to crop the images somehow, so putting them in the background makes most sense.
http://jsfiddle.net/x07jbku2/
I'm trying to create an overlay on an image using <img src="picture">. However, using background-color in CSS does not show since the picture is blocking the background. Is there a way to create a color that overlaps the picture?
I have tried using the picture has background-image:url(picture); but to my understanding, background-image does not dictate the <img> size but if you use <img src="picture">, you're picture size will form the` size. And I need the image to render proportionally to the window.
I need some insight.
I think you want something like this:
This shows a container with a background color with a image over it and image also reflects the color of its background.
Fiddle link : http://jsfiddle.net/4AtGn/
HTML:
<div class="container">
<img class="cont-img" src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
</div>
CSS:
.container{
background-color:#090;
width:100%;
}
.cont-img{
opacity:0.8;
width:100%;
}
Image Overlay Techniques:
Using background-image: If you prefer background-image then i would just using :after element and applying opacity to it. DEMO
Using <img> tag: You can use opacity: 0.1; max value 1, this will make your image transparent & you will be able to see the background image. DEMO
HTML
<div class="first-stack">
<img src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
</div>
<div class="overlay">
</div>
<div class="top-stack">
<img src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
</div>
CSS
.overlay{
position:fixed;
width:100%;
height:100%;
background:#000;
opacity:0.8;
top:0;
left:0;
}
.top-stack {
position:absolute;
top:50%;
left:50%;
margin-left:-339px;
margin-top:-255px;
}
See The Fiddle Link : http://jsfiddle.net/Jyw8S/
I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/
A single paged site with a responsive image that takes up the full screen, on any device. That's my issue I can't figure out a way to get a background image to go full screen on any device.
<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">
I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained.
The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.
Demo Fiddle
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%;
width:100%;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
I always wondered if this was possible without JS.
This is one of those situations where you can see that there is still a gap between devolpers and designers, hope we can help close it here :)
Here is a great explanation of how to do it (but for elements smaller than the container only)
http://css-tricks.com/centering-in-the-unknown/
//HTML
<div class="something-semantic">
<img class="something-else-semantic" src="wtvr"></img>
</div>
//CSS
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Best solution I've used as of late is half-hack, half-awesome.
<div class="something-semantic" style="background-image: url( {{src}} )">
<img class="something-else-semantic" src="{{src}}" />
</div>
//CSS
.something-semantic {
position:relative; /* or something other than static */
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
}
.something-semantic img{
width:100%;
height:100%;
opacity:0;
}
So for an image gallery, I'd inject the image src into inline background-image property and the <img> src attribute.
Making the REAL image completely transparent (but still visible), allows for alt tags, title, etc. Using background property lets you constrain the image dimensions to whatever size container you'd like.
the images top and left corners will always be flush with the container div, unless you know the size of the image and can give it ax explicit negative margin.
example fiddle http://jsfiddle.net/rHUhQ/
depending on the situation you can just give the image a class that styles it how you want since apparently it's container isnt that important (if it can be covered by the image in the first place).
Im just getting in to web dev (mainly an iOS, Java, c# programmer). I have a simple problem bt it is anoying.
<div id="banner">
<img src="Styles/Banner.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
I have a banner which is a simple image (.jpg) and I want to overlay some text. The problem is positioning the text over the banner. I dont realy want to use apsolute positioning. I would like to have both the image and the text centered. The problem is I ony seem to be able to overlap the text over the image when using apsolute positioning, which will be effected if the window is resised. Whats the best/simplist way to do this.
Just Like to thank all of you for being so helpful. GC
Live demo
Hey now i think you should want to this
HTML
<div id="banner">
<img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
Css
#banner{
position:relative;
background:green;
padding:10px;
}
img{
vertical-align:top;
}
#bannerText{
position:absolute;
top:20px;
left:10px;
background:red;
}
Demo
You have to give the parent element (#banner) a position: relative; to make the absolute position of its child (#bannerText) dependent on the banner position and not on the window border.
If you can use image as background instead of <img> tag using css like following example
#bannerText
{
background: url("Styles/Banner.jpg") no-repeat center center;
width: 123px;
height: 123px;
text-align: center;
}
If you don't want to use Position:
if you want to use <img> then go with "feeela's" ans