I want to develop the next thing.
See example image: Overlapping div with text and background-color with a smaller width than the text
How can I achieve this? I'm using the Visual Composer in Wordpress. You can see what I made here: http://glashelder.id-buro.nl/hometest/. This is not how I want it.
add this to your css:
.wpb_single_image.vc_align_left {
text-align: left;
position: relative;
z-index: 1;
}
You can make an image by merging white and sky color portion and set that image as background-image of that div. Then select row layout(probably 2/3+1/3
is good as per image) in the visual composer.
Or you can do this via CSS by giving absolute position one of the
div and set some margins to get same design as per image but you will need to do some more design and write css for responsiveness. So I think first option is better. :)
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.
I am currently using bootstrap and have a 3x3 grid of images. They are 200x200 images and I have looked EVERYWHERE to try and find a way to get an overlay to work on them. I only recently started writing code.
Serenbe.com has exactly what I am looking for about halfway down the page (also a 3x3 grid). The photo brightens, and a logo appears over it when you run your cursor over it. However, I would settle for text/links if a photo is not possible or too complicated. Right now absolutely nothing is working.
My images are arranged in a div within a container. The div takes up 6 columns. And the only styling I have applied is removing the padding so that it touches the edge of the page.
Any suggestions? I am 100% lost here, anything helps.
Thanks!
Have you heard of using hover with your css? :) it's pretty cool and I think that's what the site is using for its images.
An easy way to do what you want for beginners is I would have two pictures. One being the original and the second one with the effect you want. For serenbe it seems like they just added the logo on top using photoshop, then changed the opacity of the photo.
I would then wrap your img in a div and then do something like this in your css:
.customdiv{
height:200px;
width:200px;
background-image:url("imagelinkhere");
}
.customdiv:hover{
background-image:url("newimagehere");
opacity:.5;
}
What this does is change the content in your div to the new picture when you hover over the div, then apply the opacity on the image.
These are just a few tips to help you get started! Good luck
I am using a wordpress theme and have changed my background image.
I now want to display an image on top of the white background (where the content is displayed).
I have done this by using the following code:
img style="position: absolute; top:244px; left: 220px;" src="http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png"
This looks exactly how I want it to, but it has a problem. The site has a drop down menu, when you scroll down the menu it will disappear when your mouse moves over the image which is displayed behind.
Can anyone help me to move the image back to overlay the background on every page?
I have tried using z-index without any success.
This is the site that I want to apply the image to: http://www.tgon.co.uk/
Here is an example of the problem I am having: http://www.tgon.co.uk/info/languages/french/
Any help you could give would be greatly appreciated.
Basically, what you need to do is to:
Remove the 'position:absolute' from the image. - this is what cause you the overlapping problem.
Add 'margin-top: -107px;' to the image. - this will push the image up to where you want it.
Anyhow, I didn't understand why didn't you use 'background' css property for this.
You could have just do this:
#primary {
background: #fff url('http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png') no-repeat;
}
You have to remove this image:
And add this css:
#content {
background-image:url("http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png");
background-repeat:no-repeat }
Here's the solution:
#branding { z-index: 1001;}
#inner-wrapper { z-index: 1000;}
Since the header is created before the #inner-wrapper div, you will need to apply a higher z-index to header compared to div#inner-wrapper`.
EDIT
Check the screenshot of the developer console view of your markup:
Just setting the z-index right for header & div#inner-wrapper did it for me.
Let's fix this then I'll be glad to help you set the image right.
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.
On roseannebarr.tumblr.com, when you hover on my icons instead of them going up naturally they are cut off even thought I don't have a set height. I know my HTML is screwed up because I'm using a million ids but my page works off of browser bugs so just ignore it. Any ideas?
This was probablly the dumbest question ever sorry.
They are not cut off, you make the container smaller by moving the image outside the container using a negative top margin.
A simple solution is to put the black background on the #block style intead of on the #outer style. That way the image gets the background instead of the container, so the background follows the image when it moves instead of shrinking with the container.
Are you talking about the black background getting cut off when you hover over it? Do you want the whole icon including the background to go up? If so, you should just put the :hover on #outer instead of #block:
#outer:hover {
margin-top: -10px;
}
Don't know if that's what you mean. If not, let me know. :)