I want to achieve this result :
So, an image(square with red borders) and a text aligned in 2 separate columns. The background is yellow. The image sticks out of the background for aesthetic.
I have search on the forum and tried to find a solution but I couldn't.
Could someone show me the code to make this simple layout ?
Thank you :)
I tried overflow:hidden and position:relative and position:absolute but couldn't make it work !
Related
I already have data-interchange images on the page - they work fine.
Now that I want to put a background image in a 'div' - I can't get it to work.
What actually happens the image will not show until I put some content in the div. And, of course it only shows enough image to cover the block element in front of it.
I'm guessing I have to some custom CSS to fix this. I actually want the div to be content free, but just show the background image/s based on screen size via data-interchange.
Can anyone help please.
a little vague but from what you have said. have you tried adding the class
.clearfix
on the div with your image in.
So, the new Exposure site is wonderful and got me wondering how they've achieved something like this. Basically, it's a cover image that's stretched to the browser window (even if you resize), what's lovely about is that only when you scroll do you get to see the content below.
I guess you could use something like backstretch.js for the dynamically-resized image. How are they achieving the rest, though?
I've set up a pen here: http://codepen.io/realph/pen/luwdJ
Which seems to do the job, but the content is being covered when you scroll rather than falling below the cover image.
Any idea what I'm doing wrong, or any tips for achieving something like this?
Thanks in advance!
I think this is what your looking for and css can do the whole thing
http://codepen.io/anon/pen/rajDJ
Just add this rule to your images or image class
img {
width: 100%;
}
What exposure is doing there is creating onclick modal window that contains the image but you can do that with js or jquery or there are many jquery plugins that do that.
Also to get the nice grid structure you can use a grid template. Here is one to get you started http://960.gs/
I have to place navigation bar in the header image, such that it becomes transparent and i'm using the theme Diario. I know how to make nav-bar transparent but donot know how to position it on the header image.
Please help.
Thanking a lot in advance.
you could always use position: absolute so that you can move it without moving anything else
I have a page in which background image is not printing by print command.
If I set "File->print setup->Print background" then it print the image on paper in mozilla. How Can we print the page on printer. I've already set the media as print.
By default many browsers does not print background images and colours.
To make WebKit browsers (Safari, Google Chrome) print the background image or colour you should add the following CSS style to the element:
-webkit-print-color-adjust: exact;
I have found the answer !
You take an image (images will be printed)
then you calulate the width of the image example (50px) then you take the div size of the div you want to add a background to example 400px
now you know you need 8 images next to each other 8x50 is 400
Then you do the same.
So basicly you post alot of images
It sounds hard but there is an example at this question repeat img like it is a background
if you use 1 img like a color you can set it in your css with:
#divnam img
{
widht:100%;
height:100%;
}
I hope this will help cause it took me forever to find a solution !
I am trying to make it so these images will line up the way so that the blank.gif will appear in front of the image. i cannot use it as a background image, and i have tried using a negative z-index like -1 but then the image disappears all together on the site i have tried to use it on. my goal is to make the gray and black image appears behind the blank.gif.
things that i have to avoid or will not work are these:
z-index:-1 (just the negative numbers)
use of background image inside of a <div>
and both the images must remain inside a parent element, and my issue is that i cant use any script that needs to be inside of the head of the html. i have tried but cant find a solution. if you have any method of keeping an image from being right clicked and saved so easily then that would be great. any help is appreciated thank you.
image html are here: index.html
code sample:
<html><div style="position:absolute;width:150px;height:150px;display:inline;">
<img src="http://dl.dropbox.com/u/14413762/blank.gif" style="position:static:width:150px;height:150px;left:0px;top:0px;z-index:2;"><img src="http://dl.dropbox.com/u/14413762/bbc/image.png" style="position:absolute;left:0px;top:0px;;z-index:1;">
</div></html>
Yeah.. You're pretty much wasting time that is better spent elsewhere. A person who wants the image is going to get it, either with the web developer tools in firefox or chrome, viewing the page source, etc.
On a real note though, z-index only works with absolute, relative, or fixed positioned elements. It will not work with your statically positioned element that you set to a z-index of 2. I have done what you are trying to acheive with relatively positioned elements, z-index, and either top and left or negative top and left margins.