How can I do similar responsive images? Like on this page.
http://pixelgrade.com/demos/border/
I was trying do this with css, but with no effects.
Thanks.
Use background-size:cover property
html, body{
height:100%;
}
.responsive_bg{
background:url("http://upload.wikimedia.org/wikipedia/commons/5/51/ShiFengWaterFall_002.jpg") no-repeat;
background-size:cover;
width:100%;
height:100%
}
DEMO
This image is set as a background-image. Do you have any code to share with us so we might help?
Basically, instead of writing the usual image:
<img src="this/cool/image.png" />
you would use a regular div that you size according to the responsive behavior you want to see:
<div style="background-image: url(this/cool/image.png)"></div>
and the CSS that comes with to style the image (background) itself:
div{
background-size:cover; // fills the div
background-position; 50% 50%; //centers the background
//add here some way to get your div to be the proper size for responsiveness
}
And of course, you use media-queries to add some more responsiveness to the whole shenanigan.
Related
This DOM object has no specific class selector applied to it, so I can't select it via CSS.
I could use some first-child hack or change the /apps/page/.Class/* files but I don't feel like either is a clean solution.
I want to have an image with some text in front of it.
Shall I modify the HTML of my page? I could also change the CSS of a markdown or text (app), but it doesn't feel like a tidy solution.
I also thought of having the image as a background pic, then life would be easy :)
What is the best solution?
Here is where I am:
Thanks!
You should create a html-1 content and apply some css to it.
Here are the files you should create with their [file types]:
content [html-1]
content/style.css [css-1]
content/style.css/background.png [image-1]
The content file should store your HTML:
<div class="-container">
<div class="-text">Hello world</div>
</div>
The style.css file could then apply the background image and make your text prettier:
.-container {
height: 400px;
background: url(background.png) no-repeat center center transparent;
}
.-text {
color: red;
font-size: 3em;
text-align: center
line-height: 400px;
}
(The image url will be expanded by the css-1 app.)
I have a png with blue lines, a transparent background and nothing else. Is there a way in css to make the lines white?
CSS is used to modify the appearance of HTML. It cannot really affect an image directly. You could use two images of the same size, and use JavaScript to switch between them.
Here's one possible way to do this:
HTML
<body>
...
<div>
<image id="blue-img" class="currentFrame" src="/img/blue.png" />
<image id="white-img" class="hiddenFrame" src="/img/white.png" />
</div>
...
</body>
CSS
.currentFrame {
display: block;
}
.hiddenFrame {
display: none;
}
At this point, you could use the following JavaScript to hide one image and show the other. Because the images are the same size, and appear together in the HTML DOM, it will look like the images occupy the same space.
function changeFrame() {
removeClass("blue-img", "currentFrame");
addClass("blue-img, "hiddenFrame");
removeClass("white-img", "hiddenFrame");
addClass("white-img", "currentFrame");
}
// Add the given class to the DOM element with the given id
function addClass(id, class) {
...
}
// Remove the given class from the DOM element with the given id
function removeClass(id, class) {
...
}
The implementation of addClass and removeClass() functions are left as an exercise for the reader, but it can be much easier if you use jQuery or some other DOM API library.
You could also use the HTML5 <canvas> element, if you're not concerned about backwards compatibility, or if you need a transition animation. That would also involve some JavaScript coding.
You have at least 2 ways to achieve this effect
Option 1: Use the image as a mask
Here only the transparent part of the image is used, as a mask. If you apply it on a white element, the parts not masked will be white
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-color: white;
-webkit-mask-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
-webkit-mask-size: contain;
}
<div class="base">
<div class="test"></div>
</div>
Option 2: use a filter to change the color. For instance, use brightness(100)
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-size: contain;
-webkit-filter: brightness(100);
}
<div class="base">
<div class="test"></div>
</div>
However, both options have a limited support
Why don't you use the Canvas in HTML5 to create the image on user interface :-
it will give you more clarity as the images are created using px.
it will give you liberty to change in what every color, size you want as they are created using javascript .
I want to add a image hover effect on only the div images not the whole html code. How do I do this?
Take a look at how to "nest" CSS selectors.
Here's an example. Is this what you need?
<div>
Image in a div
<img src="http://baconmockup.com/300/200" />
</div>
div img:hover {
border: 1px solid red;
}
You can see it live here.
First off, I'm new to this and have been doing a lot of research, but can't find the answer.
I have set a div container at the top of my page to 100% width and 20% height.
I wanted to insert an image which would resize automatically across screen sizes.
I found some code on this site which works perfectly in safari and chrome (also resizes perfectly on an ipad and iphone) but in firefox(20) and IE(10) the image does resize slightly but wont stay in the parent container.
Can anyone help?
The original code I have been using is:
<html>
<style type="text/css">
#myDiv
{
height:auto;
width:auto;
}
#myDiv img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
</style>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</html>
Any help would be appreciated (and please remember I'm learning!)
#myDiv img
{
width:100%;
height:100%;
margin:auto;
display:block;
}
You need to set the actual width/height of the image to 100%, not the max-width and max-height.
I've researched this and only found a JavaScript solution, so wonder if anyone knows if a CSS solution is possible...
Here's a code snippet:
HTML
<div id="container">
This is a small amount of text to appear over the stretched
background image, but I want to be able to see the entire image.
</div>
CSS:
div#container
{
background: url('images/bigImage.png') no-repeat 0 0;
background-size: 100%; /* makes the image stretch (vertically and horizontally) to the width of the device, so I've no idea what height the background image will be rendered at.*/
}
Is there any CSS I can use so the background image covers the entire div with the entire image being visible?
Thanks in advance.
As previously stated its not possible to do this with CSS and background-image. Also background-size: cover is not supported by IE8 and lower (And from reading your comments i would assume that you want to have a fluid (scalable) image while maintaining aspect ratio?)
If so you can use a regular img element to achieve this:
<style type="text/css">
div#container {
position : absolute;
top : 0;
left : 0;
overflow : hidden;
width : 100%;
height : 100%;
}
div#container img {
position : absolute;
width : 100%;
top : 0;
z-index : -1;
}
</style>
<div id="container">
<img src="http://img.gawkerassets.com/img/18cxbtdr4fexmjpg/original.jpg">
This is a small amount of text to appear over the stretched
background image, but I want to be able to see the entire image.
</div>
EDIT - Heres a jsfiddle to show how it works: http://jsfiddle.net/Xfxar/
If you want to stretch the div to image size, use
background-size:cover;
If you want to scale image to div size, use
background-size:contain;
You can't detect the height of a background image in CSS or JS as far as I know, and therefore, you cannot render your DIV to this unknown height.
If you are using PHP though, it's easy as this:
<?php
$myURL = "http://i.imgur.com/AiAeQyU.gif";
$myImage = getimagesize($myURL);
?>
<div
style="
background: url('<?php echo $myURL; ?>') 0 0 no-repeat;
width: <?php echo $myImage[0] . 'px'; ?>;
height: <?php echo $myImage[1] . 'px'; ?>
">
<p>Your content</p>
</div>
Hope that helps.
You can use CSS rules width:100% and height:100% on a div to take up the remaining space of the parent div, if I understand what you are asking. It seems like you're trying to get a background image to stretch to the size of the device, and are already doing this: in general, if you want a DIV to take up the entire space, you can use the percentages in CSS. I believe if you set the background image div in this case to be 100% of the page, as well as the text div, you should fill up the entire page with the background.