I have a div (content area) with an image background, now if the div height extends to more than 600px I would like to display a different background image. Is that possible with just CSS?
here is an example i am giving, try changing the height of the result window to see the change:
.facet_sidebar{
background: url('http://www.hexaware.com/brandresourcecenter/images/images_compass.png');
height: 100px;
width: 100px;
}
#media (max-height: 600px) {
.facet_sidebar {
background: url('http://www.hexaware.com/brandresourcecenter/images/images_gears.png');
width: 100px;
}
}
jsfiddle demo
Media queries can be used to change anything.
Hope it helps
Simple answer: No.
More complex answer: It depends. For example you could set the height of the div-container relative to the height of the viewport and resize that. At some point the div will grow to a height > 600px. You could then watch out for the height of the viewport and base a media-query on the value.
#media (min-height: viewport-height when div is 601px high)
your styles {}
}
If that solution is not what you are looking for, then you have the option of looking for the height of the div with JavaScript and thereby swap the background image.
yes it is possible through the media inquiry
#media screen and (max-device-width: 768px) {
.div {
width: 960px;
background: url(...);
}
}
Related
I have created a website and there is an image (640x640px) but on mobile you have to side scroll in order to see the full picture. Does anyone know how I could change the size on mobile but make it stay the same on desktop?
this is what i have so far
<pre>
<div>
<img style="object-fit: scale-down;" src="gifs/preview.gif">
</div>
You want to use:
img {
max-width: 100%;
}
so what you can do fir this is to give the image a classname and then use that classname within a #media query
#media only screen and (max-width: 600px) {
.classname {
width: 200px;
height: 200px;
background-size: 100% 100%;
}
}
and then give it whatever size you feel works best for that size you want to achieve
try incorporating #media queries into you css file. It will look as follows:
#media only screen and (max-width: 600px) {
img {
width: 50%;
}
}
So in the above code we are creating an at media query which will trigger when the screen is less than or equal to 600px, then the following will happen, which in this case, is it will take only 50% of the parent div.
Here is a resource if you still do not understand: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this makes sense :D
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
I have an example of a website for this question (because I can't figure a way to ask it..)
https://livedemo00.template-help.com/opencart_62166/
As you can see, if you resize the browser width, only the margins resizes, and not the divs inside it.
Is there a way to acheive the result in CSS? Do I have to use Javasciprt to achieve that? Thank you.
In that example the developers are using media breakpoints. These apply different styles to elements depending on the browser window size. A tutorial is here
Basically your CSS looks something like this:
#media screen and (min-width: 500px) {
body {
width: 800px;
}
}
#media screen and (max-width: 500px) {
body {
width: 300px;
}
}
I want to make sure a HTML element (in this case an input box) maintains the 'optimal' width on different screen resolutions.
My subjective rules (for simplicity: ignoring the need for margins):
Initially set the width of the element to 40% of the window width
If the size of the element drops below a certain width (eg. 200 pixels), keep that minimum width
If the element won't fit on screen (in this example: window width is smaller then 200 pixels), set the width of the element to the window width
Can this be achieved using pure CSS (and still support IE8)?
As others have said, you can use media queries, here is a working example for your requirements.
input {
width:40%;
min-width:200px;
}
#media (max-width: 200px) {
input {
width:100%;
min-width: 0;
}
}
http://jsfiddle.net/bEvUZ/
.input_box {
width: 40%;
}
#media (max-width:500px) { /* 40% of 500px is 200px */
.input_box {
width: 200px;
}
}
#media (max-width:200px) { /* full width when the screen is smaller than 200 px */
.input_box {
width: 100%;
}
}
EDIT: Working example here http://jsfiddle.net/PXYRN/ and https://code.google.com/p/css3-mediaqueries-js/ for IE8 Support
Yes,
There are multiple ways to do that.
You can use media queries, flexboxes, and also play with box-sizing.
In your case, media queries are exactly what you need.
It's called "Responsive design".
Ex :
#media screen and (max-width: 640px) {
.bloc {
width : 40%;
}
}
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
I need the following:
emtpy div with no content
background image set to the div the
background image to be fluid/responsive on re-size I cannot set fixed
dimensions on the div
Everything I try fails to force the div open to support the size of the background image. Any help is greatly appreciated...
http://www.everymountain.us/
<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>
.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat; background-size: cover; }
The way to lock a height's aspect ratio to it's fluid width is to use padding-top or padding-bottom percentage. This is because all padding percentages are of the the element container's width. Your background image is 960 x 520, so the height is 54.166666666667%.
html
<div class="top_banner"></div>
css
.top_banner {
background-image: url('images/bg_front.jpg');
background-size: 100%;
width: 100%;
padding-top: 54.166666666667%;
height: 0;
}
Example: http://jsfiddle.net/SsTZe/156/
Essentially the same question: CSS fluid image replacement?
You can handle it after applying CSS
#DivName{
background-size: auto auto;
}
here first auto is for width and second is for height
Since this is a top google result for creating fluid-height divs in general (not just empty ones like the question specifies), I wanted to leave a CSS Calc solution that lets you put content into the div (the padding trick forces it to be empty):
.my-div {
background: #ccc url(https://link-to-image/img.jpg) no-repeat 50% 0;
background-size: 100% auto;
width: calc(100vw - 350px);
height: calc((100vw - 350px) * 0.468795); /* replace the decimal with your height / width aspect ratio */
}
Try to use medie queries in your CSS for different screen sizes to handle different fixed heights.
For example:
#media (min-width: 1200px) {
div { height: 3em; }
}
#media (min-width: 768px) and (max-width: 979px) {
div { height: 2em; }
}
#media (max-width: 767px) {
div { height: 1.2em; }
}
#media (max-width: 480px) {
div { height: 1em; }
}
etc. what you need to customize. You can leave the div width 100% to fit for all screen and the background-size:cover. You can also make different size backgrounds (diff. files) for each screen sizes to give less size to your website for mobile or tablet devices.