I am having some trouble getting the css styles to apply as intended. I'm writing this application in ReactJS/NextJS. I am trying to create a component that shows an image with text positioned on top of image. I expect the CSS styles that I'm applying to work, because I've already tested the styles through w3schools. I'm attaching screenshot of what I've done in w3schools, what I'm currently doing in my code, and how everything looks in my localhost:3000. The div with imageContainer1, has a background-image applied to it in the css file, but the image is not appearing on screen. The image that does appear is from the second div with inline styling (which I copied from somewhere, can't remember). The thing is that when I remove the inline styles and move the styles inside the style tags or in the css file, the styles no longer want to apply as they did inline. It's quite confusing how the styling is inconsistent when I move it.
Alas, the goal is to show an image, at full width of the viewport, with text positioned on top of the image. I appreciate any pointers.
import styles from './HomeContent.module.css'
const Home = () => {
return (
<div className={styles.container}>
<div className={styles.imageContainer1}></div>
<p className={styles.text}>
text
</p>
</div>
)
}
export default Home
.imageContainer1 {
background-image: url(../public/redtesla.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-width: max-content;
/* position: relative;
text-align: center;
background-color: blue; */
}
.container {
height: 100%;
margin: 0;
}
.text{
position: 'absolute';
top: '25%';
left: '10%';
color: "red";
}
Related
I am trying to create a "map" with divs over cities. I got the map in .svg format and using it as background with background-size: cover. I need the "city-divs" to stay positioned relative to the image (for example London div should be always over London position on my image). I can half-achieve this making the "city divs" absolute and then positioning it using vh and vw. However, if I resize the window or check on different computer, it messes up.
I guess pure css is not the correct way on doing this. Is there a way of achieving this or am I going completely wrong direction?
Closest I got was using this solution found on stackoverflow http://jsfiddle.net/fmenrd4z/ . This works for divs in the center of image just about right. Divs more to the left / right won't work as good.
Currently, I'm using this code.
HTML
<section id="map">
<div id="london">london</div>
<div id="paris">paris</div>
</section>
CSS
#map {
background-image: url(../img/maps/map.svg);
width: 100vw;
height: 90vh;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#london {
position: absolute;
left: 31vw;
top: 35vh;
}
#paris {
position: absolute;
left: 60vw;
top: 73vh;
}
I suppose there must be solution for this problem. I've been searching the web for whole day today but didn't found anything.
I'm up for choosing completely different way of doing this. (Is there some javascript library etc..?)
Thanks in advance!
This will never work because you position the divs dimensions that are always changing depending on the screen it is displayed.
There is one of way of doing it by giving a fixed height and width of section #map in pixels for large screens and adding some media queries for mobile screens.
#map {
width: 600px;
height: 300px;
}
#media (max-width: 1024px){
#map {
width: 300px;
height: 150px;
}
}
I have added a class in react component.
CSS file:
.bg{
background: url('../img/bg.jpg');
border: 2px solid black;
}
React render method:
render() {
return (
<div>
<div className="bg">
Hey This
</div>
</div>
);
}
The browser shows the border and loads the image but image is not visible.
The screenshot is as follows:
Can anyone tell me what I am doing wrong?
This is most likely happening because div.bg does not have a height specified. Because of this, its height fits the text content exactly.
Background images of any size have no affect on the sizing of their parent element. If your goal is to be able to see the entire image, you need to specify a height for div.bg that matches the height of the original image.
Your .bg div is currently of size 0x0 px, this is why the image is not showing. Specify a width and a height to see the image.
For example:
.bg {
height: 300px;
width: 300px;
}
Or more preferably use 100% to have the entire image fit in the div.
.bg {
height: 100%;
width: 100%;
}
As a side note: make sure your background image is not too large and takes much time to load. Large background image size can lead to very bad user experience. Consider using a png image, small image with the repeat attribute, or an svg.
Try changing the background to background-image. Also give the bg class a height and a width. Then finally specify background-size to probably cover. An example would look like
.bg {
background-image: url('../img/bg.jpg');
background-size: cover;
border: 2px solid black;
height: 300px;
width: 300px;
}
This should work as I have tried it.
background-size: contain;
Not sure what the image is, but this would size the image to fit the current div height defined by the text.
Place the img folder in public folder
.css
background: url('/img/bg.jpg');
or
.js
var logo=require("../img/Logo.svg");
<img src={logo} alt="logo"/>
Have you tried switching from
background: url('/img/bg.jpg');
to
background-image: url('/img/bg.jpg');
It's very important to set height, but not in %
Example provided by Yuval is correct and worked fine.
.bg {
height: 300px;
width: 300px;
}
I want to show an image over a menu in the right, but it doesn't work on IE and Microsoft Edge on Windows 10.
<div class="menuDiv">
<ul id="menu">
<div class="menu_image"></div>
<li><a><img src="img/image_1.png"></a>
<ul id="seccion_1"></ul>
</li>
<li><a><img src="img/report_image.png"></a>
<ul id="seccion_2"></ul>
</li>
</ul>
</div>
menuDiv uses menu of themeRoller of jqueryUI
.menu_image
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
This is how it looks on Chrome and Firefox
This is how is looks on IE
How can I show the image on IE?
I set a similar example on jsfiddle
https://jsfiddle.net/kzxfu7j4/
add
.menu{
display: relative;
}
to your css or change your .menu_image as below:
.menu_image
{
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
float:right;
}
Edit:
By the way make sure that the div has proper height and width, you can simply change its height and width to match the image height and width.
try this :
.menu_image
{
position: absolute; z-index: 9999;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
width: auto;
height: auto;
float:right;
}
If that not work, maybe it's the 'content' that the problem
I found a solution, I just set ":before" on the class menu_image and works
.menu_image:before
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
The issue is your content CSS attribute. This is only valid when applied to ::before or ::after psudo-elements:
https://developer.mozilla.org/en/docs/Web/CSS/content
You have two options:
1) If the image is important in the context of the content (so you definitely want all users to see it) simply add an <img> in the markup.
Also, since you're positioning the images with absolute positioning, it makes more sense to me to add the actual <img> tag and position them directly as opposed to positioning empty div elements and setting the image as a background.
If the images represent navigational buttons, use this method 1.
2) If the image is not important to the content context, you can add it as a background image the conventional way, using:
background-image:url(...);
https://jsfiddle.net/rwhxpmfm/
Background images have accessibility issues (for example, they're not included when a webpage is printed on paper and screen readers can't access them...but screen readers can access an <img> element's alt attribute) so only use them if it's just for decoration and not part of the content's context.
I'm really new into html/css/javascript and I need some help with a site I'm trying to design.
My URL is this one: http://www.wideconcept.com/test2/test.html
It's a full-page background site, with the background image being responsive. The problem is when the user clicks on the "photos" link, and then on '1': the image that gets displayed on the screen as the new background is not positioned as the original background image, and also the height of page increases (the user can now scroll down).
How can I change the html/css code so that, when the user clicks on the 1st image, to display it in the same way as the background image?
Thanks!
EDIT - To be more specific: My main problem is that when I click the 1st photo link, the image is not displayed in the same position and dimensions as the original background image, even though the css properties for that are the same as the original background css properties.
I just realized your design was having some scroll position for the background image( which seems fine in firefox but not in chrome )
To fix the problem:
img { //line no. 375
display: block;
height: 1px;/*this fixes your bug*/
}
Another problem I found is that your div with id background, so add the following rule inside #background:
#background {
z-index: 1; /* to fix the layer bug*/
}
I think that you can define the main background in that way:
body{
overflow: hidden;
position: absolute;
min-height: 100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(assets/bg100.jpg) no-repeat center center;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
#Add the browser prefixed CSS:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
#And
background-size: cover;
}
And then when the user clicks the photos buttons change the background image url through jQuery/javascript.
For example, using jQuery this should be similar to this:
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
});
</script>
Hope it helps.
Just like Halbano said, the problem are the <div id="background"> and the <div id="background-image">
You can fix it by doeing the following:
<div id="background background-image"></div>
Do this at the Background div.
Al of the sudden the image will drop a bit but that is simply fixed with css. Also a Menu with a button will pop-up. Apperantly the manu was there already but i could not see it in Chrome.
Good luck
How to target a specific location on the image to be cropped using css or javascript, simple way without big scripts,
Picture before :
I want the highlighted location on the following image to be viewed :
Not the exact highlighted though, just trying to explain it doesnt has to be from the very top, i want to select specific image scales,
AND how to resize is after cropping ?
Update 2022-05-27: A new property object-view-box will soon make this a lot simpler: https://ishadeed.com/article/css-object-view-box/
One approach is to use an element with overflow: hidden that has the image as a child, which itself is absolutely positioned within the context of the original element. The result being, the size of the overflow: hidden element masks the image.
Here's an example of the approach:
HTML
<div id='crop-the-cats'>
<img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>
CSS
#crop-the-cats {
width: 100px;
height: 80px;
overflow:hidden;
position:relative;
}
#crop-the-cats img {
position: absolute;
top: -60px;
left: -70px;
}
See http://jsfiddle.net/Da9CT/
Another approach is to use the image as the background of the image and reposition it using background-position:
HTML
<div id='crop-the-cats'></div>
CSS
#crop-the-cats {
width: 100px;
height: 80px;
background-image: url(http://i.stack.imgur.com/ArS4Q.jpg);
background-position: -50px -60px;
}
See http://jsfiddle.net/Da9CT/2/
You can't crop image using javascript / css but you can position it inside an element with overflow hidden: http://jsbin.com/ebenem/1/edit
Let me know if that helps!