Details : Using Atom File Editor with Mac OS X, Making a new site on localhost and after saving it I check changes on chrome browser. Right now i have come across a problem which causes the image to not show up on the website while i was trying to set background image of a section tag in CSS.
Problem : I am trying to use the stellar.js parallax plugin and for that i need to set the background property of the section tag to an image of my choice. The problem is that when i use "background : url(parallax1.png);" the image does not show up on the website and only a white blank space is shown.
HTML File :
<!-- Attempting Parallax Here -->
<section class="parallax1 pic1">
</section>
<!-- Ending Attempt Here -->
CSS File :
.pic1
{
background : url(parallax1.png);
}
.parallaxcontent
{
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-size : cover;
width: 100%;
height: auto;
}
Points You Should Know :
the image parallax1.png is in the same directory and i have checked the spelling, which is correct.
I have also tried using background-image: instead of background: .
If i use < img src="parallax.png" /> the image shows up perfectly
i have tried to encase parallax.png in '' as well as "".
Any help would be appreciated,
Thanks.
Generally, you should have some content within the section tag or you can set in .pic1 class
min-height:200px;
Try background : url("parallax1.png");
Read more here
CSS background Property
take a look
html
<section class="parallax1 pic1">
</section>
css
.pic1
{
background: blue url("https://static.xx.fbcdn.net/rsrc.php/v2/y6/r/QDLPxJ5bMSg.png");
width: 100px;
height: 32px;
border:1px solid #000;
}
.parallaxcontent
{
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-size : cover;
width: 100%;
height: auto;
}
working Fiddle
Related
I have a problem with replacing the jenkins logo on the login screen. Uses the jenkins login-theme add-on:
https://plugins.jenkins.io/login-theme/
In head I define the following code:
<style>
.simple-page .logo {
background-image: url('https://www.jenkins.io/images/logos/snow/snow.png');
background-repeat: no-repeat;
background-position: 50% 0;
height: 350px;
background-size: contain;
}
.simple-page form {
width: unset;
max-width: unset;
}
</style>
However, in the header like this:
<script>
document.getElementsByTagName('h1')[0].textContent = 'Welcome to Balajee\'s Jenkins!'
</script>
I get something like this:
The old logo is automatically added to the code all the time
</head><body><div class="simple-page" role="main"><div class="modal login"><div id="loginIntroDefault"><div class="logo"><img src="/static/9e651e0d/images/svgs/logo.svg" alt="Jenkins logo"></div><h1>Witamy w Jenkinsie!</h1></div>
How to block the appearance of the old logo and keep only the new one ???
I managed to solve the problem myself, more Work Around because it seems to me that the plugin responsible for changing the look of the home page is not working properly. As I wrote above, there was a problem with the fact that apart from the logo that I define, also the default logo appears. The workaround for this porble based on the generated HTML code was very easy to just resize the gernered default logo to zero with the following code:
In Head fieled :
<style>
.simple-page .logo {
background-image: url('https://www.jenkins.io/images/logos/snow/snow.png');
background-repeat: no-repeat;
background-position: 50% 0;
height: 200px;
background-size: contain;
}
.simple-page .logo > img {
height: 0;
}
</style>
I have an img tag like this (and I can't use a container)
<img src="https://example.com/first-image.jpg" class="my-image">
And I would like to display a second image instead of the first one on mouseover using only CSS. Maybe doing something like this:
.my-image:hover {
background-image: url("https://example.com/second-image.jpg");
}
I'm not sure if it that's possible. Any ideas?
Solution 1: HTML can be edited
You can do it by not using the src attribute and set the default image in your CSS, then change it on hover like so:
.my-image {
width: 200px;
height: 200px;
background-image: url(https://....jpg);
background-size: cover;
background-position: center;
}
.my-image:hover {
background-image: url(https://....jpg);
}
See working example here: https://jsfiddle.net/86ujL1dv/
Note that modern browsers don't load images until they're needed, so there will be a slight delay on the first hover, as the user's browser will load the second picture.
Solution 2: HTML cannot be edited
It's a bit of a hack, but you can set the size of the img to zero, and use padding to make it look the same, then use the background-image property, like so:
.my-image {
width: 200px;
height: 200px;
}
.my-image:hover {
width: 0;
height: 0;
padding: 100px;
background-size: cover;
background-position: center;
background-image: url(https://images.pexels.com/photos/4017166/pexels-photo-4017166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
See live example here: https://jsfiddle.net/1bo7L89w/
I've tried multiple different ways but none displayed the image as background.
CSS
.spec{
background: url('white_logo_red_font.jpg');
height: 100px;
width: 150px;
}
HTML
<div class="spec">
hi
</div>
The image is in the same folder so the url is correct. I've also tried background-image instead of background.
Edit: image location
index.js is where the code is.
That is probably caused by the wrong image path.
Try using link from the web, for example: background: url('https://via.placeholder.com/350x150') the image should be displayed - that means that your css syntax is fine.
Then fix your path, you probably have to add './', '/images/', '../images/' before "white_logo..." the image path have to be relative to the css file.
try,
CSS
.spec{
background: url('../white_logo_red_font.jpg');
height: 100px;
width: 150px;
}
HTML
<div class="spec">
hi
</div>
I have noticed that there is something wring with the background image url background: url('white_logo_red_font.jpg'); use correct url.
You can try my code.
.spec {
background: url(https://images.unsplash.com/photo-1578163246111-e02c555d00e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80);
height: 100px;
width: 150px;
background-size: cover;
background-position: center;
}
<div class="spec">
hi
</div>
I want to override Wordpress's Twenty-Seventeen header image by adding my own background-image via CSS. However, it just displays blank white... Here's the body's html:
<body class="page-template-default page page-id-5 logged-in wp-custom-logo has-header-image page-one-column title-tagline-hidden colors-light page-soins" data-aos-easing="ease" data-aos-duration="400" data-aos-delay="0" cz-shortcut-listen="true">
and here's my CSS to disable wordpress's header image:
.page-soins .wp-custom-header {
display: none;
}
and here's my CSS to add my background image instead:
body.page-soins {
background: url("images/backgrounds/soins-bg-1.jpg") no-repeat center center fixed;
background-size: cover;
}
Finally, here's the link to the page: http://latelierdegaia.ch/soins
Can anyone help?
.site-content-contain
and
.site-mast-head
both have
background-color: #fff;
which covers your background-image.
I found a workaround that works around! But does the trick. I just added the CSS background-image to the "site-header" class instead of the "body".
body.page-soins .site-header {
background: url("images/backgrounds/soins-bg-1.jpg") no-repeat center center fixed;
background-size: cover;
}
You just have to remove background-color: #fafafa; from your .site-header class.
I've been trying to add an image to Wordpress template, when I add a tag it auto adds display: none; to it when it appears on the site. So I decided to add it as a css image with div.
I've added this to the CSS:
.myad a{
background-image: url(http://www.henstagweekends.co.uk/images/advert.png);
background-repeat: no-repeat;
display: block;
height: 248px;
width: 189px;
z-index: 100000;
}
I've added this to the footer.php just before the tag:
<div class="myad">
</div>
I've added a temporary bg colour to show where it is. Look at the very bottom of the page.
http://www.henstagweekends.co.uk/
Any idea what is causing this?
url('URL') refers to path where images are located. Try download the image to your folder and reference it: background-image: url('<path>/advert.png')