I made an simple layout for an android application using html and css. The hole page has an background image, but i didnt declared it as:
background-image: url(
Because so belong my information i cannot center it?
So that my next plan was to make an simple div that covers the image as you can see here:
<body>
<img src="foto.jpg" class="bg">
<div class="oben">
<h1>Playing Audio</h1>
<button onclick="playAudio('test.mp3')">Play Some Audio</button>
<button onclick="playAudio('test2.mp3')">Play Some Audio2</button>
</div>
</body>
My css is the following:
.image{
position: relative;
width: 100%;
}
.oben {
position: absolute;
top: 20%;
left: 0;
width: 100%;
}
SO now back to my actual problem, the image is not streching to the 100% of the viewport instead it is having 100% of its own width, what means around 200px! But i want to strech it all over the page! Thanks!
That's becuase there is no such thing as .image
You should try this
img.bg{
position: relative;
width: 100%;
}
Related
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
I'm a beginner in HTML coding and I'm trying to display just a part of an image. I'm displaying the image this way:
<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />
but I really don't know how to display just bottom left quarter of the image. It is even possible without making a new picture with the cropped image?
If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:
.container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
bottom: 0;
left: 0;
}
<div class="container">
<img src="http://placehold.it/600x400/fa0" />
</div>
You can just use a div element that has a background image and then just apply a few css changes to that div like so:
#theImg {
height: 200px;
width: 200px;
display: block;
background-image: url('https://myimage.jpg');
background-position: bottom left;
}
JsFiddle: https://jsfiddle.net/kekwdy2L/3/
Use background-image with background-position:
#my-image {
background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
background-position: -220px -80px;
display: inline-block;
width: 200px;
height: 200px;
}
<div id="my-image"></div>
<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>
If you know the size of the image in pixels, you can use a css clip.
Note, clip is officially deprecated in css specification, however its replacement clip-path currently has very low browser support.
Another way of achieving crop is placing the <img> tag within a <div> as shown in this answer.
I'm trying to use a <img> tag to show a photo over another div, as some sort of overlay. However, the image won't scale to be inside of it's parent div (which is the body of the page). Instead it overflows the body. When I set overflow: hidden; to the body, you can't scroll over the page. I want the image to be full-height and fitted within the body (without enlarging the body).
This is basically the structure of the page:
<html>
<body>
<div class="imgContainer">
<img class="actualImage" />
</div>
<div class="restOfBody">
</div>
</body>
</html>
And the css:
body {
background-image: url(*some background photo*)
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 0;
margin: 0;
max-height: 100%;
}
.imgContainer {
z-index: 2;
position: absolute;
top: 0;
left: 0;
max-height: inherit;
}
.actualImage {
max-height: 100%;
}
This is basically what is happening now:
The image that is drawn over the text right now, pushes the page down so far, that it actually exceeds the body of the html.
height in % will not work till you will use meta for height,
ok please use overflow:hidden at the place of overflow:none
make your image as background-image. I think it would be better.
Add a container in your body as shown,
<body>
<div class="container">
<div class="imgContainer">
<img class="actualImage" src="banner.jpg">
</div>
</div>
</body>
and do this in css
.container {
width: 200px;/*sample width*/
height: 200px;/*sample height*/
overflow: hidden;
}
.imgContainer {
position: relative;
top: 0;
left: 0;
max-height: inherit;
}
The .container is responsible for setting a boundary and by using overflow: hidden, prevent content inside .container to overlap. While in the case of .imgContainer make sure the position is relative to container, absolute will pull itself out the flow, which is not safe in your case.
I'm just working on a simple HTML page but still struggling with the divs.
The plan is: a fullscreen background and four horizontal buttons next to each other on the bottom. The buttons are currently mapped to the background image - so I could just add four invisible layers (divs) with some hrefs for example. Otherwise I would add them manually (in four single jpgs) to the bottom...
Howsoever, I want the whole site to (borderlessly) scale up and down to variable screen resolutions. Therefore also the sizes of the divs/images should scale equally and keep its position.
What I've got so far:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
<body>
<div class="background">
<div class="img">
<img src="background.jpg">
</div>
</div>
</body>
At this point I only have the background set up: its in an img-div within a background container with absolute positioning.
How could I add the four buttons now to stick at the bottom of the background a keep its relative size and position when the screen resolution changes?
:)
Take the button images out of the background image, set the body rules as follows (with background-image), add a div at the bottom and put the buttons in there (I chose DIVs with background-images for the buttons, but of course you can also use <button> tags. Adjust the "bottom" and button heights and the button margins as needed:
CSS
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: url(background.jpg) center center fixed;
background-size: cover
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
.button {
display: inline-block;
width: 80px;
height: 50px;
margin: 10px;
}
.button1 {
background: url(button1.jpg) center center fixed;
background-size: cover
}
.button2 {
background: url(button2.jpg) center center fixed;
background-size: cover
}
.button3 {
background: url(button3.jpg) center center fixed;
background-size: cover
}
.button4 {
background: url(button4.jpg) center center fixed;
background-size: cover
}
HTML:
<body>
<div class="content">
(your content)
</div>
<div class="bottom">
<div class="button button1">(button text 1...)</div>
<div class="button button2">(button text 2...)</div>
<div class="button button3">(button text 3...)</div>
<div class="button button4">(button text 4...)</div>
</div>
</body>
Thanks for the quick help!
The code looks good so far. But I still have the problem that the buttons change its size when I rise or decrease the screen resolution. Is there a way to give them fixed sizes in relation to the whole screen? "buttonX" should always have x% of the screens width and x% of its height... And I don't want the actual visible positioning resp. margin to change when the resolution changes :/
But many thanks so for!
I want to get a full-screen background image but only the width, not the height, like here
I've been playing around with background-size:cover; but that covers the whole page - and I just want a certain height to be covered.
The site you mention is just using a standard background-image on a div that has a fixed height and width: 100%.
For example the site you mention uses:
header {
height: 460px;
margin-top: -69px;
overflow: hidden;
padding: 0px;
width: 100%;
}
Notice the height in the code block, background-image: cover just means scale the background image to fit the space.
so I found what I was looking for:
CSS:
#header-wrapper{
top: 0;
left: 0;
height: auto;
position: absolute;
width: 100%;
}
HTML:
<div id="header-wrapper">
<img src="image.jpg" width="100%" style="border-bottom:1px solid black;">
</div>
Thanks for all the help!
How about background-size: 100% 80% (for example).
You can change the second value, which is the height.
Here's a fiddle.