I'm doing my online portfolio website and I have a responsive problem (i always have responsive problems, hate this thing).
This is what I want my website to look like in all of screens resolutions:
https://s3.amazonaws.com/f.cl.ly/items/0W3k3Y0C3L2O2m2J2P1I/resolution2.jpg
The problem is, as you may know, when I code this in html even with Bootstrap, the the big text (designer, no matter what) covers me in the right, depending on the screen size.
How can I "fix" the text in the image so that no matter the screen size the text always stays in the same place of the image?
<img> tags do not have an option to add text on it.
You can use images as background and add text. You can use <div> tags to server this purpose. Something like below:
<div class="imageContainer">Some Text</div>
use the css background-image property to show the image
.imageContainer {
background-image: url(locationoftheimage);
}
For smaller area's you can just make the image as link, if you want. For example your menu has links such as Home, About etc.
Make a small image like this
Code would be like this:
<img src ="url_of_Image">
Related
I want to align centered an image and a short text, relative to viewport.
I would like to have the image followed by the text in the same line when it is space enough, like landscape view.
And when isn't enough space for both in the same line, I would like the text to slide under the image, and both to be still centered!
Any ideas will be welcomed.
Your request is the basic fundamental reason why the whole area of responsive web pages exist, and mobile first design methodologies ... this is a very very generic question, you need to be more specific ... are you trying to achieve this just with your own html and css ?? are you using any frame works ?? This is standard business as usual for frameworks like Bootstrap3.0 and jQuery. If you have not heard of them, then I would recommend stop trying to re-invent the wheel, get a crash course in Bootstrap3.0 (particularly in the scaffolding, this is how you achieve responsiveness, you can specify css settings for different screen sizes, what is the minimum width of an item, and what to do in the event that this minimum width is crossed ... slide one item under the other ... items can be divs, viewports, ANYTHING)
Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.
In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.
I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.
So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.
Any ideas?
Here is how I understand your question:
I have a few image files
I want to display them side by side
I have one div and I do not want to (or can not) change the HTML I have
" Using CSS3, can
I display those images side by side as backgrounds of my div?"
If this is your question, the answer is no, not as of now. Sorry.
According to this standard specification,
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
there is no position value to place background images "after previous" or "floating".
More info on multiple backgrounds and background sizing:
http://www.css3.info/preview/multiple-backgrounds/
https://css-tricks.com/almanac/properties/b/background-size/
You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file.
<div style="position:absolute;">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div>the div to be backgrounded</div>
foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css.
without positioning, you will be limited to adding any "foreground" content to the divs with the background images
based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves
If you look at what happens here when you reduce the screen width is that the big photo becomes shorter and shorter, still filling in the full 100% of the width:
https://mmistakes.github.io/minimal-mistakes/
Now, I don't find that appealing and would like to make that photo disappear and become a background of the whole top (navbar) part once the navigation bar becomes the button. However, I would like only a certain part of the photo to show up, not the whole width.
Any hints on how to achieve that?
Update: the tricky part here is that each page has its own image. Since this is jekyll, in theory, I could add a css entry in the <head> of each generated page for setting the background image of the navbar, but I'm not sure whether there is a more elegant solution.
Put the picture as a background for your nav-bar and use the css background-position attributes.
Use viewport and let the image (the img-tag) disappear
I'm creating a webpage but I am having some problems with responsiveness.
Right under my logo, there is a large image. (1000 by 550 px) Over that image, I want to place a menu - and I think I've worked that out with position: absolute. However, I want to use an introduction text, and I cant figure out how to do that.
Could I just use a TextBox with absolute and z-index? Otherwise, how can I add the image as a background image and make it responsive?
background-size: 100%;
That would make your background image responsive. But only if the container itself is responisve though. A more exact answer would require a fiddle or at least some html and css.
I was wondering what is the best practice regarding divs with backgrounds and img tags. I understand that divs with backgrounds can have stuff on top of them and what not, but if its the case with just have an image, which is the preferred method? Maybe a better question is.. are img tags obsolete? When you have an image thats a link should you use an img tag or a div?
Thanks!
Matt Mueller
Div backgrounds should be just that: background images for style. img tags should be for when you're displaying an actual image as an image itself, say you are showing a picture of something. you should use an image tag and not a div bg
Think about it as semantic markup:
If it is an "image" on the page, as far as the meaning of the page, use the img tag.
If it something that is not that significant to the page's meaning, ie. background image, use a background image on any sort of element (not just a div).
This difference really doesn't matter to how the page displays in most browsers, but has a different meaning to those who aren't interpreting the images visually.
Try to imagine how the elements will be interpreted by visually impaired.
There also may be a slightly different behavior by search engines-- I don't know whether search engines will pick up background images for their image search. If you really want the image out there, an img tag is safer.
is the image for layout or content?
if the image is layout related i would use CSS and have it in a div ...if its content related i would have it in an img ...
Hope that helps!
A good way to look at this is to view your site with stylesheets turned off. You'll quickly find out that all the DIV tags with background images do not appear. All of your IMG tag images are right where they should be. I would use DIV tags with background images for all aspects of site design and layout and use IMG tags for everything else.
IMG tags have alt properties and title properties. These are used in place of the image when it doesn't load or in place of the image in text only or screen reader type browsers.
IMG tag is not obsolete. You use it with dynamic images, that come and go from your system.
Background images on divs are useful when you have a static set of images that are part of your design. Sometimes you can merge them into one big image to minimize load time and the number of HTTP requests pro page.