First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
How should i go about forcing text to always stick inside of a particular form despite display size?
In this thingy half-transparent white triangle is a separate shape from background image and as it's obvious intent is to always have text stick inside.
Herein lies the question: what's a correct way to go about it? Are there any common practices for this?
How i'm intending to make it work right now: current idea is to make background and triangle overlay into one background picture and have a number of #media css rules for font sizes and paddings based on screen size, but i'm pretty sure that's not a correct way to go around it.
Thanks!
I am trying to create an image map where there is one main image, and when you hover over certain areas different images come up.
Something like this How to apply Hovering on html area tag? but instead of creating an outline it would show different images.
I do not want to usse jQuery and would prefer to rely on CSS and HTML.
Thanks in advance.
You could cover smaller blank images over the large main image and use the hover code separately for each image
The non hover image is a "blank" png and the hover is the desired result
Just use the code for each "blank" image with the main image in the background with z-index of "0"
As said in previous answer, you could do this by using the z-index property. But try setting the main image's z-index as 0, and all small images(that you want to show over main image) as lower than 0.
And finally, activate by swapping the z-index between values lower or higher than 0 on mouse hover.
Hope this helps :)
I want to set a prefereble image as the background for my website.
Now, an image file always comes with a fixed pixel or size. Lets say that my chosen image is 960x960 px.
But my web page may have different size, may be the size is 3 times bigger than the image.
If I set that image as background, then normally it will repeat (I know how to stop it, but that's not what I want). When it gets repeated, it will make a stripe or a shadow type line at that point where they join with each other. That means, at the image joining point, it makes a separate border (I hope you know what I mean) what looks bad and an user doesn't like it.
How to avoid that?
How can I set a background image as only a single image so that it's not clearly visible that many images are joint on the background.
As an example this is my background image:
background-image:url(img/backgr.gif);
Two possibilities:
Use a graphic program to edit your image so it becomes seamless. Look here: http://www.youtube.com/watch?v=NARVupW2ads
Use background-size:cover; to enlarge the background image so it automatically covers the whole screen.
After the background-image line have this line:
background-repeat: no-repeat;
How can I make all my pages have the same background feeling as my homepage. For example if you see this page you can see the background is out of place. Let me know if you want me to send you the code but pretty much you can see it at these pages. Thanks a lot!
PS: Any other way besides using position fixed?
Try a different approach... Instead of using 2 different gradients in two different div's (#hhbg and #footer), just combine the two gradients into one image and apply it as a background to, for example, body. Then use background-position to anchor the image to the bottom corner and repeat it horizontally.