spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

How do I overlap text on an image?


i'm not 100% on the solution you want, but i imagine it's something like this? http://jsfiddle.net/ujL4pwx9/1/

HTML

<div class="foo">
    <img src=
"http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
    <p> this is my text and it goes outside
of the image when needed </p>
</div>

CSS

div.foo{
    position:relative;
    width: 300px;
}

img{
    width:300px;
}

p{
    position:absolute;
    width:100%;
    right:-50%;
    bottom:0;
    margin:0;
    background:white;
    border:solid 1px black;
}

make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.

is this what you meant?


but personally i'd not use img and instead use a background-image

http://jsfiddle.net/9ka1fq2j/3/

HTML

<div class="foo">
    <p> this is my text and it goes outside
of the image when needed </p>
</div>

CSS

div.foo{
    position:relative;
    width: 300px;
    height:300px;
   
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
    background-size:cover;
}

p{
    position:absolute;
    width:100%;
    right:-50%;
    bottom:0;
    margin:0;
    background:white;
    border:solid 1px black;
}

Categories : HTML

Related to : How do I overlap text on an image?
Image Overlap and animation
Try @-webkit-keyframes animatedBackground @-webkit-keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } }

Categories : HTML
How to overlap a div to an another div without changing their positions - Css
Try changing div#menu to - should do the trick: div#menu { text-align: center; font-size: 120%; background-color: #FFA700; padding: 0.1%; height: 20%; width: 49%; margin-left: auto; margin-right: auto; /* add these */ margin-top: -10px; /* z-index: 3; - this was the wrong way around, ignore this line :) */ z-index: -1; } Edit: not too sure on the margin-top - might be more appropriate to change

Categories : HTML
R: Calculating overlap polygon area
Here is a method slightly different that yours (but only slightly). Inspection of switzerland@data reveals that, while there are 11 FeatureIDs (representing ethnicitity's), there are only 4 unique named ethnicity's (German, Italian, and French Swiss, and Rhaetoromanians). So the result below is based on the names, not the IDs. library(rgeos) # for gIntersection(...), etc. library(rgdal) #

Categories : R
Are rust matching statements exectued in order & can overlap?
Yes the match statements are guarantied to be executed in order, so basically these two matches are equivalent : match (a,b) { (true, _) => println!("first is true !"), (_, true) => println!("second is true !"), (_, _) => println!("none is true !"), } match (a,b) { (true, _) => println!("first is true !"), (false, true) => println!("second is true !"), (fal

Categories : Rust
Change image on click, keep image and remove if other image is clicked
var sourceSwap = function () { var $this = $(this); if (!$this.hasClass('active')) { var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); } } var makeActive = function() { var $this = $(this); // bring the active back (if any) to the first state if($('img.active').length) { var

Categories : Javascript
Recently Add
htaccess rewrite not changing html form post url
Alignment of text field and text area from Bootstrap elements
Bootstrap table not filling parent
How to automatically get element height and use that height in overlay effect
Relative Link To Local File
1px gap issue with responsive HTML template in outlook - im going crazy
"Compressing" Header Codes?
Tag appears to be interpreted as part of a link and thus breaking the link
how to make sure two inline elements stay on the same line
Multiple inputs for paypal form?
Why is this max-height for image working in every browser except Firefox?
css html centering div within parent div
Height:100% and Margin problems, extending past 100%
floating spans inside ordered list
python find specific variable in string
Parse html code and set tag
HTML Agility Pack recording errors on Optional closing tags
strange padding in responsive image
Does web2py ajax() function really work with onchange event of ?
How to align three items in same row with Bootstrap 3?
Yielding Templates through Layout with Sinatra: Yields stringified version of my html
How to keep collapsed Bootstrap columns centered
How to apply css on one html file only
radio button is showing with extra outline in IE and firefox
Is there a way to schedule html changes?
How to stop an email address going dark blue and being clickable in Outlook email client/ IPad mail client
Why does an empty span tag in a floated parent render on a new line?
CSS align 2 divs side by side
CSS | Place div after

tag

Center a Div within a Div, CSS
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.