I am trying to set images as links to an exact spot on a background image. I need the image links to stay in the same space on the background image and be responsive.
I am using html and css, and have little knowledge of any other programming language. I am trying to use a background image that is fixed and four images as links with absolute position values, but the image links move around when I change the browser window. Any suggestions? Thanks!
I can give you 2 ways to solve this as i used them before:
1: Use all measurements in %:
That is actually not responsive, but falls into the concept of fluid layout.. wich means it always fills the whole that it can on whatever size.
2: Use media queries:
that is considered responsive, because at each key sizing it will change your positionning:
#media (max-width: 1200px) {
.element {
/*INSERT POSITIONING STYLES HERE (POSITIONING[top, right, bottom, left])*/
}
}
.element {
/*INSERT DEFAULT STYLING HERE (COLORS, DISPLAY MODE, VISIBILITY, OPACITY)*/
}
REMEMBER: in order to position to work, you have to either set the element to position: fixed/absolute/relative.
Hope i helped out. In case of doubt, just ask me!
Related
I have a navbar and footer than I grabbed and customized from Bootstrap's site. I now want to have a background imagine, but I'm unsure how to do this. I know if I wanted to have just an imagine, I could put it in a div between the navbar and footer and set play around with height:100%; width:auto; so that it resizes with the browser (although this doesn't work perfectly without some modifications) but I don't know how to do this if I have body { background-image: url('...'); } I have a large resolution picture in there right now, and on a 1080 screen it doesn't scale down, it just shows 1080px of the original imagine. Is there anything in Bootstrap or CSS tricks I can use? This might be trivial to some but I am new to this, just finished Codecademy courses which introduced me to Bootstrap and now I'm trying some stuff on my own.
So to recap I want to have 16:9 ratio of a large picture, if the browser becomes to narrow, I want the height to stay the same and start "cutting off" the left/right sides of the image so that the center of the image is still in the center of the browser. Likewise for vice versa. the height:100%; width:auto; doesn't quite work because if the ratio is wrong, it stretches the image.
I also want to have a different picture if the website is accessed from a screen-reader, but that's a project for another day. Let me know if I need to clarify anything, and thanks in advance
Use your CSS this way to make the background responsive.
body {
background-image: url("myimage.jpg");
background-size: cover;
}
Then when the page becomes "too narrow" use media queries to switch the background-size properties to actual width and height that work the way you have in mind.
I am at the end of a project. I have written a lot of lines of CSS code and adding the images to a class/id would mean editing a lot of code that I have written. It would be better if a division is added inside a image tag in HTML.
Hence my question is: How to include a division inside a image tag in HTML?
Pseudo selectors might work for me but how do I do it with Pseudo selectors?
If you are not able to solve it, have a look at this link where I have used a different approach:
Make division image responsive
So to not have all the things in the comments I post an answer.
The "problem" on screen-/ viewport widths of 380px and below has several issues.
On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:
.slider-wrapper3 {
background-size: contain; /* you use cover */
background-repeat: no-repeat;
/* keep the rest of your actual code */
}
and remove the width setting (width: 310px;) at least for your small screen layout!
By doing so you have then fixed the position and size of the container (and also the background image).
So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from).
I'm quite new to web development and jQuery, so please bear with me.
I'm using Nivo Slider on a website that I'm working on. It's a responsive website, and I want the slider to be easily visible on all screen sizes. I've set a breakpoint in my CSS so that when the site gets to its smallest size (around the size of a mobile screen) the slider is set to 200% width, with the overflow hidden, so that the images are larger.
This works fine, however at this size you can only see the center of the slider, while the sides are cropped off by the edge of the screen. For most of the images I'm using this isn't a problem, however one of them is cropped very awkwardly. It's easy to reposition the whole slider, but I want to try and move this ONE image over so that it can be better seen on small screens.
The CSS I've added to the default nivo-slider.css is:
#media screen and (max-width: 31.25em) { /* 500px ÷ 16px */
.slider-wrapper{
overflow: hidden;
}
.nivoSlider {
left: -50%;
width:200%;
}
.nivo-caption {
margin-left: 25%;
width: 50%;
}
}
Thanks very much!
Just using CSS, you could add a one-off type class to that particular image, and throw that into your #media query:
.my-one-off { left:??px; margin-right:??px }
You could search for that image with jQuery as well (if I'm not mistaken, Nivo uses the jQ library).
$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example
Or
$('img[src*="one-off.jpg"]').addClass('my-one-off');
I looked at nivo-slider3.1. In order to select a particular image only and move it left you could use the following in css:
img[src="YourSpecialPic.jpg"]{
left:50px !important;
}
You can also set a custom animation for one particular slide with the following img attribute within the HTML:
data-transition="slideInLeft"
You can sub any attributes to get the desired effect, but I think this will do the trick.
NOTE:
Depending on what effects you are using will determine whether or not that messes up the animation (e.g. The slicing animation becomes screwed up after performing the left move. The slideInLeft animation seems to work fine.).
I don't have a quick or easy solution for fixing all the animation effects for that one particular slide, but I'm sure a conditional statement within the javascript could achieve it (I'm just not smart enough for it).
I have a website that will serve mobile phones and tablets which will have different form factors. I have a background image that I want for the home page and would like that image to stretch (possibly distort) to accommodate the available area.
What is the best way to do this?
Is there a good alternative that would reasonably accommodate vastly different form factors (i.e. Tablet/Phones) that would not distort the image?
===============================
Update
I leveraged this code.
.transparent-background {
background: transparent;
}
.background-image {
background: url(app-background.jpg);
background-repeat:none;
background-position:center center;
background-attachment:scroll;
background-size:100% 100%;
}
I added the transparent-background as a class to the Page and Content elements and then added the background-image class to the page element and that seems to do the trick.
Have you tried CSS3 property background-size:cover;
http://www.css3.info/preview/background-size/
If the cover keyword is the used, the background image is scaled,
again preserving the image’s original proportions / aspect ratio, this
time to be as large as possible so that the background positioning
area is completely covered by the background image, ie. both the
images width or height are equal to or exceed the background
positioning area. As such, again depending on whether or not the
proportions of the background image match those of the background
positioning area, some parts of the background image may not be in
view within the background positioning area.
It is not compatible with every browser but should be fine for devices - Compatibility
I would say that you can do this by just changing/modifying CSS.
img {
max-width: 100%;
}
Try reading this article more for better understanding.
http://www.alistapart.com/articles/fluid-images/
To answer your second question, you can use the #media rule to specify different styles for different screen sizes/devices. For example:
#media all and (min-width: 750px) {
/*Any styles in here will only be applied to browsers(screens, etc) with a width > 750px */
}
So you could have different background images/layouts based on screen size by overriding your current styles. i.e. you may have more high definition images set as the backgrounds of divs, icons, etc for larger screens. If that makes any sense.
I'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.