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.
Related
I’m currently trying to wrap my head around solving this layout with Ionic and CSS:
This is the result I achieve even after spending quite some time with it:
I've recreated the basic setup on the home page: here
The layout consists of a navbar, a fullscreen image and text-content below that. The gradient is constructed using a ::after attribute in CSS as I don't want to hard embedd the gradient in the image file with Photoshop and the likes. I had to construct the fullscreen image using a ‚position:absolute‘ attribute:
.happening-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
position:absolute; }
because for reasons beyond my knowledge, not using ‚position:absolute’ results in the image not being displayed in fullscreen but being 2 or 3 pixels smaller than the total width and thus leaving a slim border of background color around the image:
Once I do use the ‚position:absolute’ attribute however my layout becomes a complete mess because the text content is being placed all over the image content.
This is where I'm struggling to come up with a solution that tidly places the text content below the fullscreen image. Using padding is, to my understanding, not possible as quick fix as I need the layout to be independent from the image content:
if I use padding based on the height of portrait sized images, the content gets too much offset when for landscape sized images and vice versa. I could try to target landscape and portrait images using different .css classes for each and setting and matching padding, I do however feel that using padding is not the best solution.
Can someone point me to my error or a robust, content-independent solution here that keeps Image and text content tidly in order while maintaining the layout?
According to your example, the border around the image is happening because of the padding attribute in the ion-content tag, here:
If you remove that padding the image will have no space around.
By the way, the position:absolute; did the trick, because it makes the image get out of the page flow, and so, it acted as a child of the body, which doesn't have any padding/margin around.
Edited
Also, you need to remove the position:absolute from your image and add padding:0; to the tag above it, as it is adding a little space around from padding.
And from what I understood, the image and text will behave as you wished.
Hello how can I make half1/half2 background image to start at the end of the bootstrap navbar and end at the bottom of the page making no side scroll bar available on any resolution.
I tried with different methods,like making the body and html 100% height and play with content and navbar % or using the vh measure unit,I cant figure it out what is the issue,thank you.
Github: https://github.com/cotrutatiberiu/WW2
Site: https://cotrutatiberiu.github.io/WW2/nations/nations/us.html
Html path: WW2/nations/nations/us.html
Css path: WW2/css/nationscss/us.css
PS:Grid might be broken,i'm learning it
it is a little bit hard, because your layout not support it. But if you take both images and use some photo editor (photoshop or something) to merge them to only one image, it can help. Than you will use your new image on body background-image and use background-size: cover;. Be careful, other elements have to have transparent background.
I'm working on a website for a friend of mine. There's only one problem. The slider won't fit in the frame without stretching.
I've set it to 100% height, but it won't work out. (Its also responsive)
I want it to be a nice image in the original width and height (100x100, 200x200 etc) without stretching (200x500).
I hope you guys can help me out on this.
I'd tried alot and also asked some other people but they can't help me with this.
You can see the slider over here.
http://tinyurl.com/p36hz6u
Here's another version of the slider, but on this version the slider image gets cut off
http://tinyurl.com/nfjjvwu
If the images are background images, consider using the background-size:contain; which will allow the image to grow as large as visible/possible without stretching, and then you can position the background image wherever desired with background-position
If the slides have actual physical <img /> tags, I made a JSfiddle that demonstrates code that will contain an image within an element. In this example, the <div> tags represent a browser window and can be resized: http://jsfiddle.net/dds27w2y/
Firstly what I would do is to remove the: background-size: 100% 100% and add a background-position: center center.
Then I would add a background-color: white to the container. This would make it look nicer and it would be centered.
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
Here's a fiddle with my current code, for context: http://jsfiddle.net/GgvLQ/
I have a client who wants a set of Facebook links to always stay aligned with the bottom of an image that is to the left of the links, no matter what size the image is. I tried wrapping everything but the image in a div, setting the min-height to the smallest possible image the client will use, and positioning the links absolute to the bottom of the wrapper (positioned relatively), but then the image just overlaps the links when the size is large. I'm not really sure what to do at this point.
Any ideas?
I positioned the like buttons right under your image. Then depending on image size, you position: absolute; then make adjustments.
Not sure how many you have to do, but here ya: http://jsfiddle.net/stillb4llin/GgvLQ/1/
If you aren't looking for this, let me know.