Hey Guys I'm trying to build my portfolio site , I want to make the main page of the portfolio have a back ground image and when I navigate to other parts of the portfolio the background is just color , I handled setting the backgroundColor successfully but can't do the backgrounImage correctly .
Here is my code.
componentDidMount(){
this.props.changePage("Main Page");
document.body.style.backgroundImage="url('background.jpg')";
}
that's the code inside the main page component but there seems to be something wrong , is it a problem with the syntax itself or the approach itself is wrong ?
EDIT 1!!
that's the code I used for backgroundColor and it's working why isn't it working with the backgroundImage .
componentDidMount(){
this.props.changePage("About Me");
document.body.style.backgroundColor='black';
}
Set the className of element where you want to display your image equal to .bgImage.In CSS file(named as App.css) write down the code as given below that targets .bgImage and sets its background to the URL or Path provided and import the CSS file in your main file using import './App.css';
.bgImage {
background: url(./media/hero.jpg) no-repeat center center;
//some other properties
}
Your background image is in the wrong directory for create-react-app. Move ./src/background.jpg to ./public/background.jpg.
Related
I would like to create a button with animated(gif/video) background
here is an example - the DOWNLOAD button on this sites main page: https://fivem.net/
Preferably I would like to see a solution using React
in CSS:
backgroundImage: url('animated-gif-url.gif')
With Javascript, I am trying to change the background-image on my web app.
Here is how Im trying to do it:
const bgimg = {
backgroundImage: "URL('../../Images/arches.JPG')"
}
<div style={bgimg} id="bg_img">
This method works fine when I use a pic from the internet with it's url, but it wont let me add a local image. I can use the same pictures on my computer if I implement it right in css, like
.container_image {
background-image: url(./Images/yellow_stone_copy.JPG)
}
But I want to be able to change the background, while it's running, to an image on my computer. What am I doing wrong?
Make sure the url of the image you want to use is relative to the html file and not to the js file
I'm designing a website with react, and it's requested that it has an infinite number of themes.So I know how to set a few themes in the CSS or SCSS files and then switch the classes to get the themes whenever wanted. But my problem here is , now I have to get a palette of colors from an API. Now I don't know how I can assign these colors which I fetch in the js file, to a CSS file, since that's where I need to define the classes.
If you're trying to create themes, one way to do this would be to use CSS variables. Set each of your colored elements to use var(--some-variable) and then define it in your JS using document.documentElement.style.setProperty(name, value) after you fetch it from your API. This is roughly equivalent to using the :root{ } rule in CSS. In fact, you could use :root to set a default theme and then overwrite it in your JS after the fact.
In this snippet, I dynamically change the color of the <p> element from red to cyan after the window loads using this exact method.
window.onload=function(){
document.documentElement.style.setProperty("--myColor", "#0CC");
};
:root{
--myColor: #f00;
}
p
{
color: var(--myColor);
}
<p>Hello</p>
I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this:
$(".about").click(function(){
$('.active').toggleClass('active');
$('.about').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
});
I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before I've clicked any of the tabs. Could anyone explain why this is happening please?
You have some syntax errors otherwise everything is good!! keep url inside quotes as below:
$('.jumbotron').css('background-image','url(/path/to/new/image)');
I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC
I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:
There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }